// ee-visuals.jsx — heavier reusable schematic visuals (monoline, brand-teal): // VisualStage panel, SitePlan (top-down), HouseElevation + Reticle, RoofSection, Phone. // Loaded as text/babel after ee-kit.jsx. // Grounding panel that holds a scene's visual (upper-right composition slot). function VisualStage({ t, children, pad = true }) { const p = ramp(t, 0.15, 0.6, Easing.easeOutCubic); return (
{children}
); } // stroke-draw helper: returns dash style to "draw" a path of length len by progress p function draw(len, p) { return { strokeDasharray: len, strokeDashoffset: len * (1 - clamp(p, 0, 1)) }; } // ── Top-down site plan. Overlays driven by 0..1 opacity props. ────────────── function SitePlan({ t, show = {} }) { const s = (k) => clamp(show[k] || 0, 0, 1); const T = EE.teal, M = EE.mint; return ( {/* site-map label */} SITE MAP {/* compass */} N {/* lot boundary */} {/* lawn / landscaping markers (small trees) */} {/* house footprint */} HOUSE {/* driveway to street (bottom) */} DRIVE {/* OVERLAY: driveway protection mat */} {/* OVERLAY: tarps over landscaping + AC + walkway */} {/* AC unit by house */} AC {/* walkway strip */} {/* OVERLAY: trailer + bin parked per map (top right of drive) */} TRAILER BIN {/* OVERLAY: lift point + staged material bundles at house corner */} {[0, 1, 2].map((i) => ( ))} LIFT POINT {/* OVERLAY: lift-point pin marker */} {/* OVERLAY: dump trailer under tear-off zone (along house lower edge) */} DUMP TRAILER {/* tear-off zone marker on house edge */} ); } // ── House front elevation with a roaming camera reticle (scene 2) ─────────── function HouseElevation({ t }) { const T = EE.teal; // reticle positions over local 832x570 (4 elevations cycle + driveway) const stops = [ { x: 416, y: 250, label: 'FRONT' }, { x: 250, y: 250, label: 'LEFT' }, { x: 582, y: 250, label: 'RIGHT' }, { x: 416, y: 250, label: 'REAR' }, { x: 416, y: 470, label: 'DRIVEWAY' }, ]; const per = 1.05; // seconds per shot, starts ~0.9s const startAt = 0.9; const idx = clamp(Math.floor((t - startAt) / per), 0, stops.length - 1); const cur = stops[Math.max(0, idx)]; const inShot = (t - startAt) - idx * per; const flash = idx >= 0 && t > startAt ? clamp(1 - inShot / 0.28, 0, 1) : 0; const shotCount = clamp(Math.floor((t - startAt) / per) + 1, 0, 5); return (
{/* ground */} {/* house body */} {/* roof */} {/* door */} {/* windows */} {/* chimney */} {/* driveway */} {/* shutter flash */}
{/* reticle */} startAt ? 1 : 0} /> {/* captured counter */}
startAt ? 1 : 0 }}> {shotCount} / 5
); } function Reticle({ x, y, label, opacity }) { const s = 132, b = 28; const corner = (cx, cy, dx, dy) => ( ); return (
{corner(8, 8, 1, 1)} {corner(s - 8, 8, -1, 1)} {corner(8, s - 8, 1, -1)} {corner(s - 8, s - 8, -1, -1)}
{label}
); } // ── Roof cross-section with anchor + harness (scene 4) ────────────────────── function RoofSection({ t }) { const T = EE.teal; const anchorP = ramp(t, 0.7, 0.6, Easing.easeOutBack); // anchor drops to ridge const lineP = ramp(t, 1.5, 0.7); // harness line draws const tagP = ramp(t, 2.4, 0.5); // TIED OFF tag const ridge = { x: 416, y: 150 }; const worker = { x: 300, y: 318 }; const lineLen = Math.hypot(ridge.x - worker.x, ridge.y - (worker.y - 60)); return (
{/* roof triangle */} {/* deck batten lines */} {/* anchor at ridge */} {/* harness lifeline */} {/* worker on slope */}
{/* TIED OFF tag */}
TIED OFF
); } // ── Phone with messaging UI (scene 7) ─────────────────────────────────────── function Phone({ t }) { const typed = "Site set, tear-off starting."; const charP = ramp(t, 0.7, 1.3, Easing.linear); const shown = typed.slice(0, Math.round(charP * typed.length)); const photosP = ramp(t, 2.3, 0.5, Easing.easeOutBack); const sentP = ramp(t, 3.1, 0.5); return (
{/* header */}
Crew group chat
Office, Foreman, Crew
{/* thread */}
{shown}|
{/* two photo thumbnails */}
{[0, 1].map((i) => (
))}
Delivered 8:12 AM
); } Object.assign(window, { VisualStage, SitePlan, HouseElevation, Reticle, RoofSection, Phone, draw });