// video-scenes.jsx — VikingHeat infografik: per-scene captions & focus visuals
// ── Scene 1: Title (0..3) ──────────────────────────────────────────────────
function SceneTitle() {
const t = useTime();
if (t > 3.4) return null;
const op = fadeWindow(t, 0.0, 0.6, 2.6, 3.2);
const subOp = fadeWindow(t, 0.6, 1.2, 2.6, 3.2);
const rule = smooth(ramp(t, 0.4, 1.4));
return (
{/* Eyebrow */}
Sådan optimerer vi din varmepumpe
1.000 digitale twins.{'\n'}Ét sweet spot.
{/* horizontal accent rule */}
EDGE COMPUTING · LOKAL BEREGNING · INGEN CLOUD
);
}
// ── Scene 2: Comfort core caption (3..7) ──────────────────────────────────
// House is rendered globally by CenterHouse; here we add the top headline.
function SceneComfort() {
const t = useTime();
if (t < 3.0 || t > 7.4) return null;
const eOp = fadeWindow(t, 3.6, 4.2, 6.6, 7.2);
return (
Trin 01 · Komfort‑kernen
Boligens komfort er ukrænkelig.
Den ønskede temperatur holdes — altid. VikingHeat optimerer kun rundt om den.
);
}
// ── Scene 3: Triangle reveal caption (7..11) ──────────────────────────────
function SceneTriangle() {
const t = useTime();
if (t < 7.0 || t > 11.2) return null;
const eOp = fadeWindow(t, 7.4, 8.0, 10.6, 11.2);
return (
Trin 02 · Tre datakilder
Optimering rundt om komforten — aldrig imod den.
{/* Bottom caption row */}
● A · BYGNINGENS ENERGI● B · VEJRPROGNOSER● C · SPOTPRIS + SOLCELLE
);
}
// ── Scene 4: A — Indvendig data (11..15) ──────────────────────────────────
function SceneA() {
const t = useTime();
if (t < 10.8 || t > 15.4) return null;
const eOp = fadeWindow(t, 11.0, 11.6, 14.6, 15.2);
// Small "sensor list" on left side
const items = [
{ lbl: 'Frem‑ / retur', v: '32° / 28°' },
{ lbl: 'Udetemperatur', v: '−2°C' },
{ lbl: 'COP nu', v: '4.2' },
{ lbl: 'Termisk inerti', v: '4.2 timer' },
];
return (
A · BYGNINGENS ENERGI
Bygningens energiforbrug og klimaskærm.
Tilpasser sig altid bygningen uden forudgående programmering. Lærer klimaskærmen i bygningen ud fra data fra rumtermostater. Den laveste mulige fremløbstemperatur beregnes ud fra dette.
{/* Data panel */}
Live datastrøm
{items.map((it, i) => {
const rowOp = smooth(ramp(t, 11.6 + i * 0.2, 12.2 + i * 0.2));
return (
{it.lbl}{it.v}
);
})}
);
}
// ── Scene 5: B — Eksterne signaler (15..19) ──────────────────────────────
function SceneB() {
const t = useTime();
if (t < 14.8 || t > 19.4) return null;
const eOp = fadeWindow(t, 15.0, 15.6, 18.6, 19.2);
// Weather strip — 8 hours, with sun/cloud/wind icons
const hours = Array.from({ length: 8 }).map((_, i) => {
const tempC = Math.round(2 + 4 * Math.sin(i * 0.7) + Math.cos(i * 1.1));
return { h: `${(6 + i * 3) % 24}:00`, t: tempC, kind: i < 3 ? 'sun' : i < 5 ? 'cloud' : 'wind' };
});
return (
B · EKSTERNE SIGNALER
Vejrprognoser og udendørsdata.
Lokale prognoser, solindstråling, vind og udetemperatur fortæller systemet, hvornår COP‑værdien er højest. De timer matches mod laveste prispunkt.
);
}
// ── Scene 7: 1.000 digitale twins (23..27) ────────────────────────────────
function SceneTwins() {
const t = useTime();
if (t < 22.8 || t > 27.4) return null;
const eOp = fadeWindow(t, 23.0, 23.6, 26.6, 27.2);
// Counter ticks 0 → 1000 over 23.4..25.6
const counter = Math.floor(smooth(ramp(t, 23.4, 25.8)) * 1000);
// One unified grid. The candidate cells (~15) are visible from the very start
// of the scene; over time, all of them fade out except the sweet-spot cell,
// which is one of the original 15 — it lights up as the chosen one.
const cols = 50, rows = 14;
const cellW = 22, cellH = 18, pad = 4;
const gridW = cols * (cellW + pad) - pad;
const gridH = rows * (cellH + pad) - pad;
const originX = (W - gridW) / 2;
const originY = 540;
// Sweet-spot cell — chosen to be one of the deterministic candidates below.
const sweetCol = 26, sweetRow = 6;
const sweetIdx = sweetRow * cols + sweetCol;
// Phase progress
// Each candidate fades out at its own staggered time, not all at once.
// Sweet spot lights up after the others have cleared.
const sweetP = smooth(ramp(t, 25.9, 26.6)); // sweet spot lights up
const sweetPulse = 0.5 + 0.5 * Math.sin((t - 25.9) * 6);
const renderGrid = () => (
{Array.from({ length: rows * cols }).map((_, i) => {
const r = Math.floor(i / cols), c = i % cols;
const x = c * (cellW + pad), y = r * (cellH + pad);
// Deterministic ~15 candidates. Hash threshold tuned to ~15/700.
const h = ((r * 131 + c * 41 + 17) * 9301 + 49297) % 233280;
const hN = h / 233280;
const isSweet = i === sweetIdx;
const isCandidate = isSweet || hN < 0.022; // ~15 candidates incl. sweet
// Visible from start — fade out one-by-one in a quick staggered cascade
// (stagger derived from per-cell hash so order is deterministic but mixed)
const stagger = ((hN * 47.13) % 1); // 0..1 per candidate
const dimStart = 24.6 + stagger * 1.20; // spread over 1.2s
const dimP = smooth(ramp(t, dimStart, dimStart + 0.22));
const dimAmount = isSweet ? 0 : dimP;
const aliveBase = isCandidate ? (1 - dimAmount) : 0;
// green strength
const green = aliveBase;
// Sweet-spot lighting
const sw = isSweet ? sweetP : 0;
const sweetFlash = isSweet ? (0.85 + 0.15 * sweetPulse) : 1;
// Background: dark base → green when active → copper when chosen
let bg;
if (isSweet && sw > 0.05) {
bg = `oklch(${lerp(0.62, 0.78, sw)} ${lerp(0.10, 0.20, sw)} 50)`;
} else if (green > 0.02) {
// green = signal accent
bg = `oklch(${lerp(0.22, 0.66, green)} ${lerp(0.02, 0.14, green)} 155)`;
} else {
bg = VC.ink2;
}
const borderCol = isSweet && sw > 0.1
? VC.copper
: (green > 0.4 ? `oklch(0.7 0.14 155 / ${green})` : VC.line);
const scale = isSweet ? 1 + sw * 0.6 * sweetFlash : 1 + green * 0.05;
const glow = isSweet
? `0 0 ${28 * sw * sweetFlash}px ${VC.copper}, 0 0 ${60 * sw}px ${VC.copper}66`
: (green > 0.5 ? `0 0 ${8 * green}px oklch(0.7 0.14 155 / 0.6)` : 'none');
return (
);
})}
);
return (
Trin 03 · Sweet‑spot search
1.000 digitale twins beregner det bedste forløb.
{/* Counter */}
{counter.toString().padStart(4, '0')}
SCENARIER
{/* Unified grid of twins below the headline */}
{renderGrid()}
{/* Sweet spot label, anchored above the chosen cell */}
Sweet spot
{/* Vertical pointer line down to the chosen cell */}
{/* Bottom statement */}
Hvert minut afprøves 1.000 mulige varmeforløb — lokalt på enheden, ikke i cloud. VikingHeat vælger det med højeste COP, laveste pris og bibeholdt komfort.
{/* Optimised ring — larger */}
{/* HTML overlays for the centered text — clean crossfade between two strings */}
OPTIMERET
Det kloge valg til din varmepumpe
Resultatet
{/* Numbered result list, anchored to the left of the optimised ring */}
{items.map((it, i) => {
const op = smooth(ramp(t, 27.4 + i * 0.95, 28.3 + i * 0.95));
const dim = it.soon ? 0.55 : 1;
return (
{it.n}.
{it.h}
{it.s}
);
})}
);
}
// ── Persistent logo (bottom‑right, all scenes) ─────────────────────────────
function PersistentLogo() {
// Always visible — no fade, so it stays on screen across the loop.
return ;
}
Object.assign(window, {
PersistentLogo,
SceneTitle, SceneComfort, SceneTriangle,
SceneA, SceneB, SceneC, SceneTwins, SceneResult,
});