{/* gradient night sky */}

{/* faint stars */} {/* far skyline silhouette */} {/* ground */}

); } // ── Utility pole + drop line (off-canvas left → into house) ───────────────── function HJ_Utility() { const t = useTime(); const fade = clamp(t / 0.5, 0, 1) * (t > 9.5 ? clamp((10 - t) / 0.5, 0, 1) : 1); return ( ); } // ── House structure (walls, roof, interior partitions, ground) ────────────── function HJ_House() { const t = useTime(); const fade = clamp(t / 0.5, 0, 1) * (t > 9.5 ? clamp((10 - t) / 0.5, 0, 1) : 1); return ( ); } // ── Furniture / fixtures per room (decorative, unlit base) ────────────────── function HJ_Furnishings() { const t = useTime(); const fade = clamp(t / 0.5, 0, 1) * (t > 9.5 ? clamp((10 - t) / 0.5, 0, 1) : 1); return ( ); } // ── Wiring: paths that the bolt travels through ───────────────────────────── // All paths use pathLength="100" so progress 0..1 ↔ dashoffset 0..100. const HJ_TRACES = [ // 0. utility drop into meter, then to panel (the main entry) { id: 'main', d: 'M 92 340 L 172 540 L 172 600 L 220 600 L 220 700 L 240 700', delay: 0.6, dur: 0.9 }, // 1. panel → ceiling cavity (left): heads up, then runs right inside the ceiling. // Branches drop down to each room. { id: 'ceiling', d: 'M 270 640 L 270 605 L 1700 605', delay: 1.5, dur: 1.3 }, // 2. drop to living-room TV { id: 'tv', d: 'M 355 605 L 355 690', delay: 1.9, dur: 0.35 }, // 3. drop to living-room lamp + outlet { id: 'lamp', d: 'M 505 605 L 505 830', delay: 2.0, dur: 0.45 }, // 4. drop to kitchen under-cabinet rail (and along the rail) { id: 'kitchen', d: 'M 705 605 L 705 690 L 600 690 L 705 690 L 860 690', delay: 2.2, dur: 0.65 }, // 5. drop to central pendant { id: 'pendant', d: 'M 1030 605 L 1030 700', delay: 2.5, dur: 0.6 }, // 6. drop to bedside table outlet, then up the lamp stem { id: 'bedlamp', d: 'M 1410 605 L 1410 800 L 1408 754', delay: 2.4, dur: 0.55 }, // 7. drop to EV charger { id: 'ev', d: 'M 1461 605 L 1461 730', delay: 2.6, dur: 0.5 }, // 8. exterior porch light (via switched leg out the front door header) { id: 'porch', d: 'M 220 605 L 220 720 L 175 720', delay: 2.7, dur: 0.5 }, ]; function HJ_Wiring() { const t = useTime(); const fade = clamp(t / 0.5, 0, 1) * (t > 9.5 ? clamp((10 - t) / 0.5, 0, 1) : 1); return ( ); } // ── Room-glow overlays — soft warm light pouring out of a room when lit ───── function HJ_Glow({ x, y, w, h, color, litAt, intensity = 0.65, rise = 0.4 }) { const t = useTime(); const fade = clamp(t / 0.5, 0, 1) * (t > 9.5 ? clamp((10 - t) / 0.5, 0, 1) : 1); const k = Easing.easeOutCubic(clamp((t - litAt) / rise, 0, 1)); // gentle flicker on first 0.25s of rise const flick = (t > litAt && t < litAt + 0.25) ? 0.6 + 0.4 * Math.abs(Math.sin((t - litAt) * 60)) : 1; const op = k * intensity * flick * fade; return (

); } // Small bright point of light at a specific fixture (lamp head, LED, etc.) function HJ_Point({ x, y, color, litAt, r = 14, intensity = 1, rise = 0.35, flicker = false }) { const t = useTime(); const fade = clamp(t / 0.5, 0, 1) * (t > 9.5 ? clamp((10 - t) / 0.5, 0, 1) : 1); let k = Easing.easeOutCubic(clamp((t - litAt) / rise, 0, 1)); if (flicker && t > litAt && t < litAt + 0.3) { k *= 0.5 + 0.5 * Math.abs(Math.sin((t - litAt) * 70)); } const op = k * intensity * fade; return (

); } // ── Meter dial spin + panel breaker cascade ───────────────────────────────── function HJ_PanelLife() { const t = useTime(); const fade = clamp(t / 0.5, 0, 1) * (t > 9.5 ? clamp((10 - t) / 0.5, 0, 1) : 1); // meter dial: starts spinning at t≈1.0s; runs through 4s const meterT = clamp((t - 1.0) / 3.0, 0, 1); const angle = meterT * 720; // 2 full rotations const meterLit = clamp((t - 1.0) / 0.3, 0, 1); // breaker cascade: 8 small breakers light up between 1.4s and 2.2s const breakerStart = 1.4; const breakerStep = 0.08; return ( ); } // ── The MSA pendant (center bulb) — the climax ────────────────────────────── function HJ_Pendant() { const t = useTime(); const fade = clamp(t / 0.5, 0, 1) * (t > 9.5 ? clamp((10 - t) / 0.5, 0, 1) : 1); // power-on starts at 5.5s, settles at 6.5s; flicker for first 0.4s const onStart = 5.5; const baseK = Easing.easeOutCubic(clamp((t - onStart) / 1.0, 0, 1)); let intensity = baseK; if (t > onStart && t < onStart + 0.4) { intensity *= 0.55 + 0.45 * Math.abs(Math.sin((t - onStart) * 70)); } // breathing during hold (6.5–8.5) if (t > 6.5 && t < 8.5) { intensity *= 0.92 + 0.08 * Math.sin((t - 6.5) * 2.4); } const k = intensity; const size = 220; return (

{/* huge halo */}

{/* tighter halo */}

); } // ── Whole-house ambient glow (the moment the pendant is full) ─────────────── function HJ_AmbientWash() { const t = useTime(); const fade = clamp(t / 0.5, 0, 1) * (t > 9.5 ? clamp((10 - t) / 0.5, 0, 1) : 1); const k = Easing.easeOutCubic(clamp((t - 6.0) / 1.0, 0, 1)); return (

); } // ── Tagline & branding overlay ────────────────────────────────────────────── function HJ_Overlay() { const t = useTime(); const fade = (t > 9.5 ? clamp((10 - t) / 0.5, 0, 1) : 1); const introT = Easing.easeOutCubic(clamp((t - 0.4) / 0.5, 0, 1)); const tagT = Easing.easeOutCubic(clamp((t - 7.4) / 0.55, 0, 1)); const tag2T = Easing.easeOutCubic(clamp((t - 7.8) / 0.55, 0, 1)); const botT = Easing.easeOutCubic(clamp((t - 8.3) / 0.5, 0, 1)); return (

{/* top-left status */}

MSA Electrical · Service call

{/* top-right meta */}

23:47 · Edmonton, AB

Power restored

{/* main tagline */}

Reliable Power.

Unmatched Performance.

{/* bottom MSA line */}

MSA Electrical Ltd. · 780.278.7443 · Residential · Commercial · Edmonton

{/* small process labels that fly in as each room lights */}

); } function RoomLabel({ x, y, label, time }) { const t = useTime(); const k = Easing.easeOutCubic(clamp((t - time) / 0.4, 0, 1)); const fadeOut = clamp((t - (time + 2.5)) / 0.5, 0, 1); const op = k * (1 - fadeOut); return (

{label}

); } // ── Compose the whole scene ───────────────────────────────────────────────── function BoltJourneyScene() { return ( {/* per-room light states — these are positioned in absolute coords matching the SVG canvas */} {/* TV glow — cool blue */} {/* Living room lamp */} {/* Kitchen under-cabinet */} {/* Bedroom lamp */} {/* EV charger LED */} {/* Porch light */} {/* small EV charger panel light (a tiny green dot on the wall box) */}

); } // Bright SVG dot on the EV charger (on top of the wall box rendering) function HJ_EVStatusDot() { const t = useTime(); const k = Easing.easeOutCubic(clamp((t - 3.1) / 0.4, 0, 1)); const pulse = 0.7 + 0.3 * Math.sin((t - 3.1) * 4); return ( ); } // TV screen content (a soft gradient swatch on the TV face) function HJ_TVScreen() { const t = useTime(); const k = Easing.easeOutCubic(clamp((t - 2.25) / 0.5, 0, 1)); const flick = t > 2.25 && t < 2.55 ? 0.5 + 0.5 * Math.abs(Math.sin((t - 2.25) * 60)) : 1; return ( {/* scanlines */} {Array.from({length: 8}).map((_, i) => ( ))} ); } Object.assign(window, { BoltJourneyScene, HJ_COLORS, HJ_TRACES });