JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<div id="wom"> <div class="wom-stage"> <video id="wom-video" class="wom-layer" muted playsinline webkit-playsinline preload="auto"></video> <img id="wom-img" class="wom-layer" alt="Wilderness of Mirrors — recruiting"> <div class="wom-fx"></div> </div> <div id="wom-text" class="wom-text"></div> <a id="wom-join" class="wom-join" href="https://spygamedc.com/recruits/"><span id="wom-join-text" class="wom-join-text"></span></a> <button id="wom-skip" class="wom-skip" type="button">Skip</button> </div> <<script>> /* =================================================================== WILDERNESS OF MIRRORS — passage: LandingPage SugarCube 2.37.2 · SpygameDC.com Self-contained: markup above, CSS + engine below. Nothing else needs to live in Story Stylesheet / Story JavaScript. =================================================================== */ /* ---- story-wide settings (harmless to re-run) ---- */ Config.history.maxStates = 1; Config.history.controls = false; Config.passages.nobr = false; Config.saves.maxAutoSaves = 0; Config.saves.maxSlotSaves = 0; /* ---- inline stylesheet (re-applied every load so edits always take effect) ---- */ var womStyleEl = document.getElementById('wom-inline-style'); if (!womStyleEl) { womStyleEl = document.createElement('style'); womStyleEl.id = 'wom-inline-style'; document.head.appendChild(womStyleEl); } womStyleEl.textContent = ` :root { --wom-green: #33ff66; --wom-green-dim: #1f9c3f; --wom-red: #e0242b; --wom-red-dim: #b81920; --wom-bg: #000000; --wom-fade: 700ms; } #ui-bar, #ui-dialog, .ui-close, #story-caption, #story-title { display: none !important; } html, body { margin: 0; padding: 0; height: 100%; background: var(--wom-bg); overflow: hidden; } #story, #passages, .passage { margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100% !important; } #wom { position: fixed; inset: 0; background: var(--wom-bg); color: var(--wom-green); font-family: "Glass TTY VT220", "IBM Plex Mono", "Courier New", Courier, monospace; overflow: hidden; cursor: default; -webkit-font-smoothing: none; } .wom-stage { position: absolute; inset: 0; } .wom-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--wom-fade) ease-in-out; pointer-events: none; background: var(--wom-bg); z-index: 1; } #wom-video.is-visible, #wom-img.is-visible { opacity: 1; } #wom-video { z-index: 1; } #wom-img { z-index: 2; } .wom-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%), repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.16) 3px, rgba(0,0,0,0.16) 4px); } .wom-text { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: 14vh; width: min(72ch, 88vw); font-size: clamp(0.95rem, 2.0vw, 1.5rem); line-height: 1.55; letter-spacing: 0.02em; text-shadow: 0 0 4px rgba(51, 255, 102, 0.55), 0 0 18px rgba(51, 255, 102, 0.22), 0 2px 6px rgba(0, 0, 0, 0.95); } .wom-text.is-centered { bottom: auto; top: 50%; transform: translate(-50%, -50%); } .wom-line { margin: 0 0 0.35em 0; white-space: pre-wrap; word-break: break-word; text-align: left; } .wom-line.is-open { font-size: clamp(1.5rem, 4.2vw, 2.75rem); font-weight: 700; letter-spacing: 0.12em; line-height: 1.3; } .wom-cursor { display: inline-block; width: 0.62em; height: 1.05em; margin-left: 0.06em; vertical-align: -0.16em; background: var(--wom-green); box-shadow: 0 0 8px rgba(51, 255, 102, 0.75); animation: wom-blink 1.06s steps(1, end) infinite; } @keyframes wom-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .wom-cursor.is-solo { width: 0.72em; height: 1.15em; font-size: 1.35em; } .wom-cursor.is-open { width: 0.6em; height: 1.05em; font-size: 1.3em; } /* ---- Join / Apply button ---- Deliberately plain: solid red, bold sans-serif, white text, no border, no glow, no icon. Meant to stand on its own without terminal styling. */ .wom-join { position: absolute; z-index: 6; left: 50%; transform: translateX(-50%) translateY(8px); bottom: 7vh; display: inline-block; padding: 0.85em 2.6em; border: none; border-radius: 4px; background: var(--wom-red); color: #ffffff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(1rem, 1.8vw, 1.3rem); font-weight: 800; letter-spacing: 0.04em; text-decoration: none; text-transform: uppercase; opacity: 0; visibility: hidden; cursor: pointer; content: none !important; transition: opacity 500ms ease-out, transform 500ms ease-out, background-color 180ms linear; } .wom-join.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .wom-join.is-centered { top: 50%; bottom: auto; transform: translate(-50%, -50%); } .wom-join.is-centered.is-visible { transform: translate(-50%, -50%); } .wom-join:hover, .wom-join:focus-visible { background: var(--wom-red-dim); outline: none; } .wom-join::after, .wom-join::before { content: none !important; display: none !important; } .wom-skip { position: absolute; z-index: 6; right: 1.4rem; bottom: 1.2rem; padding: 0.45em 1em; border: 1px solid rgba(51, 255, 102, 0.35); background: transparent; color: rgba(51, 255, 102, 0.55); font-family: inherit; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; opacity: 0; transition: opacity 300ms linear, color 180ms linear, border-color 180ms linear; } .wom-skip.is-visible { opacity: 1; } .wom-skip:hover, .wom-skip:focus-visible { color: var(--wom-green); border-color: var(--wom-green); outline: none; } @media (prefers-reduced-motion: reduce) { .wom-cursor { animation: none; opacity: 1; } .wom-layer { transition-duration: 1ms; } } @media (max-width: 640px) { .wom-text { bottom: 18vh; width: 90vw; } .wom-line.is-open { font-size: clamp(1.25rem, 6vw, 2rem); } .wom-join { bottom: 8vh; padding: 0.8em 2.1em; } } `; /* ---- sequence engine ---- */ window.WOM = (function () { 'use strict'; /* ============ CONFIG — edit here ============ */ var CFG = { videoSrc: '/video/womlandingpage.mp4', videoPoster: '', imageSrc: '/images/womlandingpage.png', joinUrl: 'https://spygamedc.com/recruits/', joinText: 'APPLY NOW', /* ---- timing (milliseconds) ---- */ cursorHold: 2500, typeSpeed: 42, typeSpeedPunct: 260, lineGap: 420, videoLineHold: 1000, imageLineHold: 1000, holdAfterOpen: 1100, fadeMs: 700, videoDuration: 16000, videoTextDelay: 900, holdBeforeImage: 600, imageTextDelay: 700, buttonDelay: 650, finalHold: 14000, /* ---- behavior ---- */ loop: true, stopLoopOnInteract: true, showSkip: true, /* ---- copy ---- */ lines: { open: [ 'CAN WE TRUST YOU WITH A SECRET?' ], video: [ '...Because Washington runs on them.', 'Some are more dangerous than others.', 'Shared over coffee... or over encrypted transmissions.', 'Secrets maintain the balance of power.' ], image: [ 'We are recruting... We need people like you.', 'Join the Intelligence Community today.', 'Help secure our most guarded secrets.' ] } }; /* ============ END CONFIG ============ */ var gen = 0, engaged = false, booted = false, els = {}, reduced = false; try { reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; } catch (e) { reduced = false; } function $(id) { return document.getElementById(id); } function wait(ms, g) { return new Promise(function (resolve) { setTimeout(function () { if (g === gen) resolve(); }, ms); }); } function clearText() { if (els.text) { els.text.innerHTML = ''; els.text.classList.remove('is-centered'); } } function newLine(centered, isOpen) { var line = document.createElement('div'); line.className = 'wom-line' + (isOpen ? ' is-open' : ''); var chars = document.createElement('span'); chars.className = 'wom-chars'; line.appendChild(chars); els.text.appendChild(line); if (centered) els.text.classList.add('is-centered'); return chars; } function makeCursor(solo, isOpen) { var c = document.createElement('span'); c.className = 'wom-cursor' + (solo ? ' is-solo' : '') + (isOpen ? ' is-open' : ''); return c; } function typeLine(text, g, opts) { opts = opts || {}; return new Promise(function (resolve) { if (g !== gen) return; var sink = newLine(!!opts.centered, !!opts.openLine); var cursor = makeCursor(false, !!opts.openLine); sink.parentNode.appendChild(cursor); if (reduced) { sink.textContent = text; resolve(); return; } var i = 0; (function step() { if (g !== gen) return; if (i >= text.length) { resolve(); return; } var ch = text.charAt(i); sink.textContent += ch; i += 1; var delay = CFG.typeSpeed; if ('.?!…—'.indexOf(ch) !== -1) delay += CFG.typeSpeedPunct; else if (ch === ',' || ch === ';' || ch === ':') delay += 120; setTimeout(step, delay); })(); }); } function typeBeat(lines, g, opts) { opts = opts || {}; var chain = Promise.resolve(); lines.forEach(function (line, idx) { chain = chain.then(function () { if (g !== gen) return; return typeLine(line, g, opts).then(function () { if (idx < lines.length - 1) return wait(CFG.lineGap, g); }); }); }); return chain; } function typeSequential(lines, g, opts) { opts = opts || {}; var holdMs = opts.holdMs || 0; var chain = Promise.resolve(); lines.forEach(function (line) { chain = chain.then(function () { if (g !== gen) return; clearText(); return typeLine(line, g, opts).then(function () { return wait(holdMs, g); }); }); }); return chain; } function typedSequentialDuration(lines, holdMs) { if (reduced) return 0; var total = 0; lines.forEach(function (line) { var lineTime = line.length * CFG.typeSpeed; for (var i = 0; i < line.length; i++) { var ch = line.charAt(i); if ('.?!…—'.indexOf(ch) !== -1) lineTime += CFG.typeSpeedPunct; else if (ch === ',' || ch === ';' || ch === ':') lineTime += 120; } total += lineTime + holdMs; }); return total; } function waitForVideoEnd(maxMs, g) { return new Promise(function (resolve) { var done = false; function finish() { if (done || g !== gen) return; done = true; els.video.removeEventListener('ended', finish); resolve(); } els.video.addEventListener('ended', finish); setTimeout(finish, maxMs); }); } function show(el) { if (el) el.classList.add('is-visible'); } function hide(el) { if (el) el.classList.remove('is-visible'); } function resetStage() { hide(els.video); hide(els.image); hide(els.join); clearText(); if (els.join) els.join.classList.remove('is-centered'); if (els.video) { try { els.video.pause(); els.video.currentTime = 0; } catch (e) {} } } function showJoinButton() { if (els.joinText) els.joinText.textContent = CFG.joinText; els.join.classList.add('is-centered'); show(els.join); } function run() { gen += 1; var g = gen; resetStage(); els.text.classList.add('is-centered'); var soloLine = document.createElement('div'); soloLine.className = 'wom-line'; soloLine.appendChild(makeCursor(true, false)); els.text.appendChild(soloLine); return wait(CFG.cursorHold, g) .then(function () { if (g !== gen) return; clearText(); return typeBeat(CFG.lines.open, g, { centered: true, openLine: true }); }) .then(function () { return wait(CFG.holdAfterOpen, g); }) .then(function () { if (g !== gen) return; clearText(); show(els.video); var p = els.video.play(); if (p && p.catch) p.catch(function () {}); return wait(CFG.fadeMs + CFG.videoTextDelay, g); }) .then(function () { if (g !== gen) return; return typeSequential(CFG.lines.video, g, { centered: true, openLine: true, holdMs: CFG.videoLineHold }); }) .then(function () { if (g !== gen) return; var spent = CFG.fadeMs + CFG.videoTextDelay + typedSequentialDuration(CFG.lines.video, CFG.videoLineHold); var remaining = Math.max(600, CFG.videoDuration - spent); return waitForVideoEnd(remaining, g); }) .then(function () { if (g !== gen) return; hide(els.video); clearText(); return wait(CFG.fadeMs + CFG.holdBeforeImage, g); }) .then(function () { if (g !== gen) return; try { els.video.pause(); } catch (e) {} show(els.image); return wait(CFG.fadeMs + CFG.imageTextDelay, g); }) .then(function () { if (g !== gen) return; return typeSequential(CFG.lines.image, g, { centered: true, openLine: true, holdMs: CFG.imageLineHold }); }) .then(function () { if (g !== gen) return; clearText(); return wait(CFG.buttonDelay, g); }) .then(function () { if (g !== gen) return; showJoinButton(); }) .then(function () { return wait(CFG.finalHold, g); }) .then(function () { if (g !== gen) return; if (!CFG.loop) return; if (CFG.stopLoopOnInteract && engaged) return; run(); }); } function skipToEnd() { engaged = true; gen += 1; var g = gen; resetStage(); hide(els.video); show(els.image); wait(CFG.fadeMs + 200, g) .then(function () { if (g !== gen) return; return typeSequential(CFG.lines.image, g, { centered: true, openLine: true, holdMs: CFG.imageLineHold }); }) .then(function () { if (g !== gen) return; clearText(); return wait(300, g); }) .then(function () { if (g !== gen) return; showJoinButton(); }); } function markEngaged() { engaged = true; } function boot() { els.root = $('wom'); if (!els.root) return false; els.video = $('wom-video'); els.image = $('wom-img'); els.text = $('wom-text'); els.join = $('wom-join'); els.joinText = $('wom-join-text'); els.skip = $('wom-skip'); if (!booted) { booted = true; els.video.src = CFG.videoSrc; if (CFG.videoPoster) els.video.poster = CFG.videoPoster; els.video.muted = true; els.video.defaultMuted = true; els.video.playsInline = true; els.video.setAttribute('playsinline', ''); els.video.setAttribute('webkit-playsinline', ''); els.video.load(); els.image.src = CFG.imageSrc; els.join.href = CFG.joinUrl; if (CFG.showSkip) { show(els.skip); els.skip.addEventListener('click', skipToEnd); } else { els.skip.style.display = 'none'; } els.join.addEventListener('mouseenter', markEngaged); els.join.addEventListener('focus', markEngaged); els.root.addEventListener('touchstart', markEngaged, { passive: true }); } return true; } return { config: CFG, start: function () { if (boot()) run(); }, restart: function () { engaged = false; if (boot()) run(); }, skip: skipToEnd, stop: function () { gen += 1; } }; })(); setTimeout(function () { window.WOM.restart(); }, 0); <</script>>