/* eslint-disable */
const { useState, useEffect, useRef } = React;
// ──────────────────────────────────────────────
// Logo — ".mo" with a glowing dot accent
// ──────────────────────────────────────────────
function DotmoMark({ size = 28, accent }) {
return (
mo
);
}
// ──────────────────────────────────────────────
// Moment card — always-visible Play pill,
// hover "video preview" via Ken-Burns + grain.
// ──────────────────────────────────────────────
function MomentCard({ moment, hoverPlays, onOpen }) {
const [hover, setHover] = useState(false);
const { title, desc, pos, duration, tag } = moment;
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
onClick={() => onOpen && onOpen(moment)}
role="button"
tabIndex={0}
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpen && onOpen(moment); } }}
>
);
}
// ──────────────────────────────────────────────
// Section header for "Blasphemous"
// ──────────────────────────────────────────────
function SectionHeader({ count }) {
return (
Featured · Live
{count === 1 ? '1 moment' : `${count} moments`}
2D · Souls-like · Generative
Blasphemous
Pre-rendered moments from a single run, each one an entry point.
Press play to drop into a real-time, infinitely branching continuation.
);
}
// ──────────────────────────────────────────────
// Site header
// ──────────────────────────────────────────────
function SiteHeader({ accent }) {
return (
);
}
// ──────────────────────────────────────────────
// Play overlay — gradient fade to black, centered
// 512×288 demo stage with a live canvas + Play / Reset / Close.
// ──────────────────────────────────────────────
function PlayOverlay({ moment, onClose }) {
const [mounted, setMounted] = useState(false);
const demoRef = useRef(null);
// Lift DemoStage state up so the HUD can render outside the stage frame.
const [demoState, setDemoState] = useState({
status: 'connecting',
statusMsg: 'connecting…',
recvCount: 0,
queueLen: 0,
heldDisplay: [],
renderedHeld: [],
pingMs: null,
denoiseMs: null,
decodeMs: null,
});
useEffect(() => {
if (moment) {
const id = requestAnimationFrame(() => setMounted(true));
return () => cancelAnimationFrame(id);
} else {
setMounted(false);
}
}, [moment]);
if (!moment) return null;
const { status: demoStatus } = demoState;
const playEnabled = demoStatus === 'ready';
const resetEnabled = ['ready', 'streaming', 'starting', 'error'].includes(demoStatus);
return (
{moment.tag}
{moment.title}
{/* The decorative still + grain stay underneath the canvas; they
fade out once live frames are flowing (see styles). */}
);
}
// ──────────────────────────────────────────────
// StatsPanel — top-left HUD with PING / DENOISE / DECODE.
// PING is a real WS round-trip measured by demo.jsx; DENOISE/DECODE come
// from the model server, attached to the first frame of every block.
// ──────────────────────────────────────────────
function StatsPanel({ pingMs, denoiseMs, decodeMs }) {
const fmt = (v) => (v == null ? '—' : Math.round(v));
const ping = pingMs == null ? null : Math.round(pingMs);
const quality = ping == null ? 'good' : ping < 30 ? 'good' : ping < 55 ? 'ok' : 'bad';
return (
PING
{fmt(pingMs)}ms
DENOISE
{fmt(denoiseMs)}ms
DECODE
{fmt(decodeMs)}ms
);
}
// ──────────────────────────────────────────────
// App
// ──────────────────────────────────────────────
const ACCENT = '#FF3B2F';
function App() {
useEffect(() => {
document.documentElement.style.setProperty('--accent', ACCENT);
}, []);
const moments = window.BLASPHEMOUS_MOMENTS;
const [playing, setPlaying] = useState(null);
useEffect(() => {
const onKey = (e) => { if (e.key === 'Escape') setPlaying(null); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, []);
return (
{moments.map((m) => (
))}
setPlaying(null)} />
);
}
ReactDOM.createRoot(document.getElementById('root')).render();