RabbitHole ARC DEMO

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<div id="home-wrap">  <header id="rh-header"> <img id="rh-title" src="https://i.imgur.com/1n4DEra.png" alt="RabbitHole ARC"> <nav id="home-nav"> <a href="#" id="nav-about">ABOUT US</a> <a href="mailto:jason@rabbitholestory.com">CONTACT</a> </nav> </header>  <div id="start-btn"> <img id="rabbit-img" src="https://i.imgur.com/5kDGMQD.png" alt="Start RabbitHole"> </div>  <footer id="corp-footer"> <p><strong>RabbitHole ARC</strong> — Augmented Reality Cinema</p> <p>Created by <strong>Elder Scare LLC</strong>, merging film, AI, and audience interaction into immersive cinematic experiences.</p> <p>Powered by <strong>AWS Bedrock</strong>, <strong>Rekognition</strong>, and <strong>Supabase</strong>. <strong>Built on AWS.</strong></p> </footer> </div>  <script> $(function () { // Start button -> spin then go to mmmhome $(document).one('click', '#start-btn', function () { const $wrap = $('#home-wrap'); $wrap.addClass('spin-out'); setTimeout(function () { if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play('mmmhome'); } }, 1800); }); // ABOUT US link -> go to "about us" passage $(document).on('click', '#nav-about', function (e) { e.preventDefault(); if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play('about us'); } }); }); </script>

<div id="about-wrap"> <div id="about-content"> <div id="about-text" data-typewriter="true"> <p><strong>RabbitHole ARC</strong> or augmented reality cinema, is an immersive cinematic platform that merges film and gaming. Instead of just watching a story, participants travel inside it — switching perspectives, and uncovering hidden clues that progress you through branching narratives.</p> <p>In a time where audiences scroll past everything — where attention is fractured across platforms and algorithms — studios and brands are fighting just to be seen.</p> <p>Every day, the digital noise grows stronger. You’ve got stories worth telling — but they’re trapped in old formats, in passive media.</p> <p> What you need is something that connects every touchpoint and pulls the audience inside the story instead of pushing content at them.</p> <p><strong>That’s where RabbitHole ARC steps in.</strong></p> <p>We’ve created the framework for immersive storytelling: interactive video, location triggers, AI-driven dialogue — all connected through an agentic cinematic organism.</p> <p>We teach your company how to use it — how to design a narrative journey, how to make your customer the hero of their own story.</p> <p><strong>RabbitHole ARC doesn’t replace your storytelling — it amplifies it.</strong></p> </div> <br><br> <a class="back-btn" onclick='SugarCube.Engine.play("rabbithome")'>BACK</a> </div> </div>

<div id="gate-wrap"> <div id="gate-overlay"></div> <div id="gate-inner"> <div id="gate-text" data-typewriter="true"> <p>This experience contains fictional violence and disturbing imagery presented in a controlled narrative demo.</p> <p>Miss Murder Me is a private preview sequence built on RabbitHole ARC to demonstrate our interactive storytelling technology.</p> <p>Viewer discretion is advised.</p> <p>Do you wish to proceed into the Miss Murder Me demo environment?</p> </div> <div id="gate-actions"> <a class="gate-back" onclick="SugarCube.Engine.play('rabbithome')">BACK</a>  <div id="gate-start-btn" onclick="SugarCube.Engine.play('rabbitlog')"> <img src="https://i.imgur.com/0RYpq9f.png" alt="Enter Miss Murder Me"> </div> </div> </div> </div>

:: jess_post_1 <div class="rh-media" id="media-jess1"> <div class="rh-player-wrap"> <div id="clipA"></div> </div>  <div id="agent-jess1" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://tiktok.com/@alvarezjessica76" target="_blank" rel="noopener"> Follow on TikTok </a> </div> <script> $(function () { // 1) Build Jessica faux player RH.initSkinPlayer({ id: 'clipA', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20post%201%20live%20stream.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20post%201%20live%20stream.jpg', title: 'Jessica Live — Post 1', user: '@alvarezjessica76', vid: 'jess_post_1', controlsPosition: 'below' }); // 2) Layout RH.autoLayoutMedia('media-jess1'); // 3) Y/N/M/O routing for this post const routes = { Y: 'jess_post_1', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-jess1').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Optional: global watch counter if (RH.mountCounter) { RH.mountCounter(); } // 5) Hook the underlying <video> so we jump to next Jessica post when done const video = $('#clipA').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('jess_post_2'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box */ #agent-jess1 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-jess1 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: ldk_post 1 <div class="rh-media" id="media-ldk"> <div class="rh-player-wrap"> <div id="yt1"></div> </div>  <div id="agent-ldk" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div>  <div class="rh-player-links"> <a href="https://youtube.com/@OuterMethod/playlists" target="_blank" rel="noopener"> Subscribe on YouTube </a> </div> <script> $(function () { // 1) Faux YouTube-style player (16:9) RH.initSkinPlayer({ id: 'yt1', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+1+Slow+Zoom.mp4', // poster: 'https://YOUR-S3/frame-yt.jpg', title: 'Miss Murder Me — LDK Post 1', user: '@OuterMethod', vid: 'ldk_post_1' // unique ID for 00/20 counter }); // 2) Layout: call autoLayout, then FORCE stacked layout RH.autoLayoutMedia('media-ldk'); $('#media-ldk').removeClass('side'); // 3) Y/N/M/O routing — match Jessica/Merrick canonical routes const routes = { Y: 'jess_post_1', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-ldk').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Controls under the video $('#yt1 .rh-frame').addClass('controls-below'); // 5) Global 00/20 counter if (RH.mountCounter) { RH.mountCounter(); } // 6) Autoplay + auto-advance to ldk_post_2 when done const video = $('#yt1').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('ldk_post_2'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-ldk .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-ldk .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: mmm_merr_post 1 <div class="rh-media" id="media-merrick1"> <div class="rh-player-wrap"> <div id="merrickClip1"></div> </div>  <div id="agent-merrick1" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://x.com/Merrick_CID" target="_blank" rel="noopener"> Follow on X </a> </div> <script> $(function () { // 1) Faux X / Twitter-style player RH.initSkinPlayer({ id: 'merrickClip1', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick%201080p/MMM%20post%201%20Surveil%20Order.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick%201080p/MMM%20post%201%20Surveil%20Order.jpg', title: 'Merrick Cam — Surveil Order', user: '@Merrick_CID', vid: 'merr_post_1', // ✅ match nav map + routes controlsPosition: 'below' // ✅ lets faux-nav place arrows cleanly }); // 2) Layout: auto, then force stacked (no side-by-side) RH.autoLayoutMedia('media-merrick1'); $('#media-merrick1').removeClass('side'); // 3) Y/N/M/O routing — matches Jessica pattern const routes = { Y: 'jess_post_1', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-merrick1') .off('click.merr1') .on('click.merr1', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target && window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play(target); } }); // 4) Keep the global 00/20 bubble alive if (window.RH && typeof RH.mountCounter === 'function') { RH.mountCounter(); } // 5) Autoplay + auto-advance to merr_post_2 when done const video = $('#merrickClip1').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play('merr_post_2'); } }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-merrick1 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-merrick1 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

<div class="mmm-terminal" id="merrickAgentBox">  <<if !$mmmSeenIntro>> <div id="merrick-intro" data-typewriter="true"> <p>MERRICK: You’re plugged into my case backend. We’ve got Jessica’s live streams, the killer’s camera, and my briefings — but the file is full of gaps.</p> <p>YOUR JOB IS TO HELP ME RECONSTRUCT THE NIGHT. ASK ANYTHING ABOUT FOOTAGE, TIMELINE, OR EVIDENCE — OR USE KEYS <strong>Y</strong>, <strong>N</strong>, <strong>M</strong>, <strong>O</strong> TO LET ME PICK THE NEXT LANE.</p> <p>Every clip you watch and every lane you follow pushes the case index forward. When you hit the right flags, I’ll surface hidden leads — extra posts, my fifth briefing, POV sync, even a GPS-locked clue. When <strong>FOLLOW MERRICK → GO</strong> lights up, hit <strong>GO</strong> and I’ll drop you straight into the next piece of the truth.</p> </div> <<set $mmmSeenIntro = true>> <<else>> <div id="merrick-intro"> <p>YOUR JOB IS TO HELP ME RECONSTRUCT THE NIGHT. Ask about footage, timeline, or evidence — or use keys <strong>Y</strong>, <strong>N</strong>, <strong>M</strong>, <strong>O</strong> to let me pick the next lane.</p> <p>Keep bouncing between lanes and watching clips. When you’ve tripped a new lead, <strong>FOLLOW MERRICK → GO</strong> lights up — hit <strong>GO</strong> and I’ll move you to the next clue. Or just ask me, <em>“Did I unlock a clue yet?”</em> and I’ll check the index for you.</p> </div> <</if>>  <div class="mmm-agent-choices"> <button class="mmm-agent-btn" data-choice="Y">Y · Jessica stream</button> <button class="mmm-agent-btn" data-choice="N">N · Killer-cam (LDK)</button> <button class="mmm-agent-btn" data-choice="M">M · Merrick briefing</button> <button class="mmm-agent-btn" data-choice="O">O · Play full sequence</button> </div>  <div id="merrick-output" class="mmm-terminal-output"> <p>MERRICK: Feed me a question about the Miss Murder Me case.</p> </div>  <div id="merrick-next-wrap" class="mmm-next-wrap" style="margin-top:0.75em; display:none;"> <span class="mmm-next-label">FOLLOW MERRICK →</span> <button id="merrick-go">GO</button> </div>  <div class="mmm-terminal-input-row"> <input id="merrick-question" type="text" autocomplete="off" placeholder="Ask Merrick about footage, timeline, or evidence..." /> <button id="merrick-send">SEND</button> </div>  <div id="merrick-routing" class="mmm-terminal-routing"></div>  <div id="merrick-clues" class="mmm-clue-links"></div>  <div class="mmm-terminal-footer"> <<link "BACK">><<goto "mmmhome">><</link>> </div> </div> <style> .mmm-agent-choices{ display:flex; flex-wrap:wrap; gap:.6rem; margin:.9rem 0 .75rem 0; } .mmm-agent-btn{ border:1px solid rgba(0, 228, 255, 0.35); background:rgba(0,0,0,0.40); color:#fff; padding:.45em .75em; border-radius:6px; font:700 13px ui-monospace, Menlo, Consolas, monospace; cursor:pointer; letter-spacing:.06em; text-transform:uppercase; } .mmm-agent-btn:hover{ background:rgba(0, 228, 255, 0.12); } #merrick-intro{ font-size:0.9rem; line-height:1.4; opacity:0.9; } .mmm-next-wrap{ font-size:0.8rem; letter-spacing:.08em; text-transform:uppercase; } .mmm-next-label{ margin-right:.5em; opacity:.85; } #merrick-go{ padding:.3em .8em; font:700 11px ui-monospace, Menlo, Consolas, monospace; border-radius:4px; border:1px solid rgba(0, 228, 255, 0.6); background:rgba(0,0,0,0.7); color:#fff; cursor:pointer; } #merrick-go:hover{ background:rgba(0, 228, 255, 0.15); } /* 🔐 UNLOCKED LEADS block styling */ .mmm-clue-links{ margin-top:1rem; padding-top:.75rem; border-top:1px dashed rgba(0, 228, 255, 0.3); font-size:0.8rem; } .mmm-clue-links-title{ font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.35rem; opacity:.85; } .mmm-clue-links ul{ list-style:none; padding:0; margin:0; } .mmm-clue-links li{ margin:0 0 .25rem 0; } .mmm-clue-links a{ color:#00e4ff; text-decoration:none; } .mmm-clue-links a:hover{ text-decoration:underline; } </style>

:: jess_post_2 <div class="rh-media" id="media-jess2"> <div class="rh-player-wrap"> <div id="clipB"></div> </div>  <div id="agent-jess2" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://tiktok.com/@alvarezjessica76" target="_blank" rel="noopener"> Follow on TikTok </a> </div> <script> $(function () { // 1) Build Jessica faux player (Post 2) RH.initSkinPlayer({ id: 'clipB', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20Post%202%20Lost%20Dog%20Poster.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20Post%202%20Lost%20Dog%20Poster.jpg', title: 'Jessica Live — Post 2', user: '@alvarezjessica76', vid: 'jess_post_2', controlsPosition: 'below' }); // 2) Layout RH.autoLayoutMedia('media-jess2'); // 3) Y/N/M/O routing for this post const routes = { Y: 'jess_post_2', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-jess2').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Optional: global watch counter if (RH.mountCounter) { RH.mountCounter(); } // 5) Auto-play this clip and jump to jess_post_3 when it ends const video = $('#clipB').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('jess_post_3'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-jess2 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-jess2 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: mmm_sequence  <div class="rh-media" id="media-seq"> <div class="rh-player-wrap"> <div id="seq1"></div> </div> <div id="agent-seq"></div> </div>  <div class="rh-seq-ctrl"> <button class="rh-seq-btn" id="seqPrev">◀ PREV</button> <div class="rh-seq-status"> <span id="seqLabel">—</span> <span id="seqCount">0 / 0</span> </div> <button class="rh-seq-btn" id="seqNext">NEXT ▶</button> <button class="rh-seq-btn ghost" id="seqReplay">REPLAY</button> <button class="rh-seq-btn ghost" id="seqSkipAll">SKIP ALL ➜</button> </div> <script> window.RH = window.RH || {}; if (!RH.playSequence) { RH.playSequence = function playSequence(rootId, items, opts) { if (!items || !items.length) return; const $root = $('#' + rootId); const $label = $('#seqLabel'); const $count = $('#seqCount'); const $btnPrev = $('#seqPrev'); const $btnNext = $('#seqNext'); const $btnReplay = $('#seqReplay'); const $btnSkip = $('#seqSkipAll'); let i = 0; function mount(idx) { i = Math.max(0, Math.min(idx, items.length - 1)); const it = items[i]; // Rebuild faux player cleanly inside the sequence slot $root.empty().removeData('rh-wired'); const innerId = 'seqInner'; $root.append($('<div>', { id: innerId })); RH.initSkinPlayer({ id: innerId, skin: it.skin || 'yt', aspect: it.aspect || (it.skin === 'tt' ? '9:16' : '16:9'), src: it.src, poster: it.poster, title: it.title || '', user: it.user || '', vid: it.vid || null }); // Controls UNDER the video $('#' + innerId + ' .rh-frame').addClass('controls-below'); // HUD label + count $label.text(it.ui || it.title || ''); $count.text((i + 1) + ' / ' + items.length); // Layout player + agent, then FORCE stacked layout (no .side) RH.autoLayoutMedia('media-seq'); $('#media-seq').removeClass('side'); // Agent panel, full-width (compact:false) RH.mountAgentPanel({ containerId: 'agent-seq', title: 'Detective Merrick', promptPlaceholder: 'Y / N / M / O …', compact: false, routes: (opts && opts.routes) ? opts.routes : { Y: 'jess_post 1', N: 'rabbithome', M: 'mmm_marked', O: 'mmm_overview' } }); // Auto-play + auto-advance system (UNMUTED) const video = $root.find('video').get(0); if (video) { video.muted = false; // audio ON // Try to auto-play this clip video.play().catch(err => { // First clip may require a manual tap on mobile; // once user interacts, subsequent clips should auto-play. }); video.onended = () => { if (i < items.length - 1) { // Mount next clip mount(i + 1); // After mount, grab the new <video> and auto-play it too setTimeout(() => { const nextVid = $root.find('video').get(0); if (nextVid) { nextVid.muted = false; nextVid.play().catch(() => { // If blocked, user can still hit PLAY manually }); } }, 50); } else if (opts && typeof opts.onDone === 'function') { opts.onDone(); } }; } } // Controls $btnPrev.off('click').on('click', () => mount(i - 1)); $btnNext.off('click').on('click', () => mount(i + 1)); $btnReplay.off('click').on('click', () => mount(i)); $btnSkip.off('click').on('click', () => { if (opts && typeof opts.skipTo === 'string') { SugarCube.Engine.play(opts.skipTo); } else if (opts && typeof opts.onDone === 'function') { opts.onDone(); } }); // Start with first clip mount(0); }; } $(function () { const clips = [ /* FIRST THREE */ { ui: 'Jessica — Vertical Live', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20post%201%20live%20stream.mp4', title: 'Jessica — Stream 1', user: '@alvarezjessica76', vid: 'jess_post_1' }, { ui: 'LDK — Slow Zoom', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+1+Slow+Zoom.mp4', title: 'Miss Murder Me — LDK Post 1', user: '@OuterMethod', vid: 'ldk_post_1' }, { ui: 'Merrick Cam — Surveil Order', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+1+Surveil+Order.mp4', title: 'Merrick Cam — Surveil Order', user: '@Merrick_CID', vid: 'merrick_post_1' }, /* REST OF THE SEQUENCE */ { ui: 'Jessica — Dog Poster', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+2+Lost+Dog+Poster.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post 2', user: '@alvarezjessica76', vid: 'jess_post_2' }, { ui: 'Jessica — Threshold', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+3+Dog+Threshold.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post 3', user: '@alvarezjessica76', vid: 'jess_post_3' }, { ui: 'LDK — Cage Reveal', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+2+cage+reveal.mp4', poster: 'https://YOUR-S3/ldk_clip.jpg', title: 'Miss Murder Me — LDK Post 2', user: '@OuterMethod', vid: 'ldk_post_2' }, { ui: 'Jessica — Memory', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+4-5+Reveal-Memory.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post 4', user: '@alvarezjessica76', vid: 'jess_post_4' }, { ui: 'Merrick — Lost Control', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+3+Loss+of+Control.mp4', poster: 'https://YOUR-S3/merrick_clip.jpg', title: 'Merrick Cam — Post 3', user: '@Merrick_CID', vid: 'merrick_post_3' }, { ui: 'LDK — The Corner', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+4+In+corner.mp4', poster: 'https://YOUR-S3/ldk_clip.jpg', title: 'Miss Murder Me — LDK Post 4', user: '@OuterMethod', vid: 'ldk_post_4' }, { ui: "Jessica — Jessica's Offer", skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+6+Jessica\'s+offer.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: "Jessica Live — Post 6", user: '@alvarezjessica76', vid: 'jess_post_6' }, { ui: 'Jessica — Phone Death', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+7-8+Phone+to+Death.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post 7', user: '@alvarezjessica76', vid: 'jess_post_7' }, { ui: 'LDK — Escape', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+8+Escape+angle.mp4', poster: 'https://YOUR-S3/ldk_clip.jpg', title: 'Miss Murder Me — LDK Post 8', user: '@OuterMethod', vid: 'ldk_post_8' }, { ui: 'Merrick — Lockdown', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+4+perimeter+Lockdown.mp4', poster: 'https://YOUR-S3/merrick_clip.jpg', title: 'Merrick Cam — Post 4', user: '@Merrick_CID', vid: 'merrick_post_4' } ]; RH.playSequence('seq1', clips, { skipTo: 'mmm_agent', onDone: function () { SugarCube.Engine.play('mmm_agent'); }, routes: { Y: 'jess_post 1', N: 'rabbithome', M: 'mmm_marked', O: 'mmm_overview' } }); if (RH.mountCounter) RH.mountCounter(); }); </script> <style> .rh-seq-ctrl { margin-top: .75rem; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; font: 700 12px ui-monospace, Menlo, Consolas, monospace; color:#fff; } .rh-seq-status { opacity:.85; display:flex; align-items:center; gap:.6rem; } .rh-seq-btn { border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color:#fff; padding:.45em .7em; border-radius:6px; cursor:pointer; } .rh-seq-btn:hover { background: rgba(255,255,255,.12); } .rh-seq-btn.ghost { opacity:.85; } @media (max-width: 640px){ .rh-seq-ctrl { gap:.55rem; } .rh-seq-btn { padding:.4em .55em; } } </style>:: mmm_sequence  <div class="rh-media" id="media-seq"> <div class="rh-player-wrap"> <div id="seq1"></div> </div> <div id="agent-seq"></div> </div>  <div class="rh-seq-ctrl"> <button class="rh-seq-btn" id="seqPrev">◀ PREV</button> <div class="rh-seq-status"> <span id="seqLabel">—</span> <span id="seqCount">0 / 0</span> </div> <button class="rh-seq-btn" id="seqNext">NEXT ▶</button> <button class="rh-seq-btn ghost" id="seqReplay">REPLAY</button> <button class="rh-seq-btn ghost" id="seqSkipAll">SKIP ALL ➜</button> </div> <script> window.RH = window.RH || {}; if (!RH.playSequence) { RH.playSequence = function playSequence(rootId, items, opts) { if (!items || !items.length) return; const $root = $('#' + rootId); const $label = $('#seqLabel'); const $count = $('#seqCount'); const $btnPrev = $('#seqPrev'); const $btnNext = $('#seqNext'); const $btnReplay = $('#seqReplay'); const $btnSkip = $('#seqSkipAll'); let i = 0; function mount(idx) { i = Math.max(0, Math.min(idx, items.length - 1)); const it = items[i]; // Rebuild faux player cleanly inside the sequence slot $root.empty().removeData('rh-wired'); const innerId = 'seqInner'; $root.append($('<div>', { id: innerId })); RH.initSkinPlayer({ id: innerId, skin: it.skin || 'yt', aspect: it.aspect || (it.skin === 'tt' ? '9:16' : '16:9'), src: it.src, poster: it.poster, title: it.title || '', user: it.user || '', vid: it.vid || null, controlsPosition: 'below' }); // HUD label + count $label.text(it.ui || it.title || ''); $count.text((i + 1) + ' / ' + items.length); // Layout player + agent, then FORCE stacked layout (no .side) RH.autoLayoutMedia('media-seq'); $('#media-seq').removeClass('side'); // Agent panel, full-width (compact:false) RH.mountAgentPanel({ containerId: 'agent-seq', title: 'Detective Merrick', promptPlaceholder: 'Y / N / M / O …', compact: false, routes: (opts && opts.routes) ? opts.routes : { Y: 'jess_post 1', N: 'rabbithome', M: 'mmm_marked', O: 'mmm_overview' } }); // Auto-play + auto-advance system (UNMUTED) const video = $root.find('video').get(0); if (video) { video.muted = false; // audio ON // Try to auto-play this clip video.play().catch(err => { // First clip may require a manual tap on mobile; // once user interacts, subsequent clips should auto-play. }); video.onended = () => { if (i < items.length - 1) { // Mount next clip mount(i + 1); // After mount, grab the new <video> and auto-play it too setTimeout(() => { const nextVid = $root.find('video').get(0); if (nextVid) { nextVid.muted = false; nextVid.play().catch(() => { // If blocked, user can still hit PLAY manually }); } }, 50); } else if (opts && typeof opts.onDone === 'function') { opts.onDone(); } }; } } // Controls $btnPrev.off('click').on('click', () => mount(i - 1)); $btnNext.off('click').on('click', () => mount(i + 1)); $btnReplay.off('click').on('click', () => mount(i)); $btnSkip.off('click').on('click', () => { if (opts && typeof opts.skipTo === 'string') { SugarCube.Engine.play(opts.skipTo); } else if (opts && typeof opts.onDone === 'function') { opts.onDone(); } }); // Start with first clip mount(0); }; } $(function () { const clips = [ /* FIRST THREE */ { ui: 'Jessica — Vertical Live', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20post%201%20live%20stream.mp4', title: 'Jessica — Stream 1', user: '@alvarezjessica76', vid: 'jess_post_1' }, { ui: 'LDK — Slow Zoom', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+1+Slow+Zoom.mp4', title: 'Miss Murder Me — LDK Post 1', user: '@OuterMethod', vid: 'ldk_post_1' }, { ui: 'Merrick Cam — Surveil Order', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+1+Surveil+Order.mp4', title: 'Merrick Cam — Surveil Order', user: '@Merrick_CID', vid: 'merrick_post_1' }, /* REST OF THE SEQUENCE */ { ui: 'Jessica — Dog Poster', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+2+Lost+Dog+Poster.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post 2', user: '@alvarezjessica76', vid: 'jess_post_2' }, { ui: 'Jessica — Threshold', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+3+Dog+Threshold.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post 3', user: '@alvarezjessica76', vid: 'jess_post_3' }, { ui: 'LDK — Cage Reveal', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+2+cage+reveal.mp4', poster: 'https://YOUR-S3/ldk_clip.jpg', title: 'Miss Murder Me — LDK Post 2', user: '@OuterMethod', vid: 'ldk_post_2' }, { ui: 'Jessica — Memory', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+4-5+Reveal-Memory.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post 4', user: '@alvarezjessica76', vid: 'jess_post_4' }, { ui: 'Merrick — Lost Control', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+3+Loss+of+Control.mp4', poster: 'https://YOUR-S3/merrick_clip.jpg', title: 'Merrick Cam — Post 3', user: '@Merrick_CID', vid: 'merrick_post_3' }, { ui: 'LDK — The Corner', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+4+In+corner.mp4', poster: 'https://YOUR-S3/ldk_clip.jpg', title: 'Miss Murder Me — LDK Post 4', user: '@OuterMethod', vid: 'ldk_post_4' }, { ui: "Jessica — Jessica's Offer", skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+6+Jessica\'s+offer.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: "Jessica Live — Post 6", user: '@alvarezjessica76', vid: 'jess_post_6' }, { ui: 'Jessica — Phone Death', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+7-8+Phone+to+Death.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post 7', user: '@alvarezjessica76', vid: 'jess_post_7' }, { ui: 'LDK — Escape', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+8+Escape+angle.mp4', poster: 'https://YOUR-S3/ldk_clip.jpg', title: 'Miss Murder Me — LDK Post 8', user: '@OuterMethod', vid: 'ldk_post_8' }, { ui: 'Merrick — Lockdown', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+4+perimeter+Lockdown.mp4', poster: 'https://YOUR-S3/merrick_clip.jpg', title: 'Merrick Cam — Post 4', user: '@Merrick_CID', vid: 'merrick_post_4' } ]; RH.playSequence('seq1', clips, { skipTo: 'mmm_agent', onDone: function () { SugarCube.Engine.play('mmm_agent'); }, routes: { Y: 'jess_post_1', N: 'rabbithome', M: 'mer_post_1, O: 'mmm_sequence' } }); if (RH.mountCounter) RH.mountCounter(); }); </script> <style> .rh-seq-ctrl { margin-top: .75rem; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; font: 700 12px ui-monospace, Menlo, Consolas, monospace; color:#fff; } .rh-seq-status { opacity:.85; display:flex; align-items:center; gap:.6rem; } .rh-seq-btn { border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color:#fff; padding:.45em .7em; border-radius:6px; cursor:pointer; } .rh-seq-btn:hover { background: rgba(255,255,255,.12); } .rh-seq-btn.ghost { opacity:.85; } @media (max-width: 640px){ .rh-seq-ctrl { gap:.55rem; } .rh-seq-btn { padding:.4em .55em; } } </style>

:: jess_post_3 <div class="rh-media" id="media-jess3"> <div class="rh-player-wrap"> <div id="clipC"></div> </div>  <div id="agent-jess3" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://tiktok.com/@alvarezjessica76" target="_blank" rel="noopener"> Follow on TikTok </a> </div> <script> $(function () { // 1) Build Jessica faux player (Post 3) RH.initSkinPlayer({ id: 'clipC', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20Post%203%20Dog%20Threshold.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20Post%203%20Dog%20Threshold.jpg', title: 'Jessica Live — Post 3', user: '@alvarezjessica76', vid: 'jess_post_3', controlsPosition: 'below' }); // 2) Layout RH.autoLayoutMedia('media-jess3'); // 3) Y/N/M/O routing for this post const routes = { Y: 'jess_post_3', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-jess3').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Optional: global watch counter if (RH.mountCounter) { RH.mountCounter(); } // 5) Auto-play this clip and jump to jess_post_4-5 when it ends const video = $('#clipC').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('jess_post_4-5'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-jess3 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-jess3 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: jess_post_4-5 <div class="rh-media" id="media-jess4"> <div class="rh-player-wrap"> <div id="clipD"></div> </div>  <div id="agent-jess4" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://tiktok.com/@alvarezjessica76" target="_blank" rel="noopener"> Follow on TikTok </a> </div> <script> $(function () { // 1) Build Jessica faux player (Post 4-5) RH.initSkinPlayer({ id: 'clipD', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20Post%204-5%20Reveal-Memory.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20Post%204-5%20Reveal-Memory.jpg', title: 'Jessica Live — Post 4-5', user: '@alvarezjessica76', vid: 'jess_post_4-5', controlsPosition: 'below' }); // 2) Layout RH.autoLayoutMedia('media-jess4'); // 3) Y/N/M/O routing for this post const routes = { Y: 'jess_post_4-5', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-jess4').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Optional: global watch counter if (RH.mountCounter) { RH.mountCounter(); } // 5) Auto-play this clip and jump to jess_post_6 when it ends const video = $('#clipD').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('jess_post_6'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-jess4 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-jess4 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: jess_post_6 <div class="rh-media" id="media-jess6"> <div class="rh-player-wrap"> <div id="clipF"></div> </div>  <div id="agent-jess6" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://tiktok.com/@alvarezjessica76" target="_blank" rel="noopener"> Follow on TikTok </a> </div> <script> $(function () { // 1) Build Jessica faux player (Post 6) RH.initSkinPlayer({ id: 'clipF', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+6+Jessica%27s+offer.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+6+Jessica%27s+offer.jpg', title: 'Jessica Live — Post 6', user: '@alvarezjessica76', vid: 'jess_post_6', controlsPosition: 'below' }); // 2) Layout RH.autoLayoutMedia('media-jess6'); // 3) Y/N/M/O routing for this post const routes = { Y: 'jess_post_6', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-jess6').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Optional: global watch counter if (RH.mountCounter) { RH.mountCounter(); } // 5) Auto-play this clip and jump to jess_post_7-8 when it ends const video = $('#clipF').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('jess_post_7-8'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-jess6 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-jess6 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: jess_post_1-12 <div class="rh-media" id="media-jess1_12"> <div class="rh-player-wrap"> <div id="clipJ"></div> </div>  <div id="agent-jess1_12" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://tiktok.com/@alvarezjessica76" target="_blank" rel="noopener"> Follow on TikTok </a> </div> <script> $(function () { // 1) Build Jessica faux player (Posts 1–12 compilation) RH.initSkinPlayer({ id: 'clipJ', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+post+1-12+park+snatch.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+post+1-12+park+snatch.jpg', title: 'Jessica Live — Posts 1–12', user: '@alvarezjessica76', vid: 'jess_post_1-12', controlsPosition: 'below' }); // 2) Layout RH.autoLayoutMedia('media-jess1_12'); // 3) Y/N/M/O routing for this post (same pattern as jess_post_7-8) const routes = { Y: 'jess_post_1-12', // stays here N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-jess1_12').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Optional: global watch counter if (RH.mountCounter) { RH.mountCounter(); } // 5) Auto-play this clip and jump to jess_post_1-12-2 when it ends const video = $('#clipJ').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('jess_post_1-12-2'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-jess1_12 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-jess1_12 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: jess_post_7-8 <div class="rh-media" id="media-jess5"> <div class="rh-player-wrap"> <div id="clipE"></div> </div>  <div id="agent-jess5" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://tiktok.com/@alvarezjessica76" target="_blank" rel="noopener"> Follow on TikTok </a> </div> <script> $(function () { // 1) Build Jessica faux player (Post 7–8) RH.initSkinPlayer({ id: 'clipE', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+7-8+Phone+to+Death.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+7-8+Phone+to+Death.jpg', title: 'Jessica Live — Post 7-8', user: '@alvarezjessica76', vid: 'jess_post_7', controlsPosition: 'below' }); // 2) Layout RH.autoLayoutMedia('media-jess5'); // 3) Y/N/M/O routing for this post const routes = { Y: 'jess_post 7', // stays here N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-jess5').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Optional: global watch counter if (RH.mountCounter) { RH.mountCounter(); } // 5) Auto-play this clip and jump back to Merrick console when it ends const video = $('#clipE').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('mmm_agent'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-jess5 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-jess5 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: jess_post 1-12-2 <div class="rh-media" id="media-jess1_12_2"> <div class="rh-player-wrap"> <div id="clipK"></div> </div>  <div id="agent-jess1_12_2" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://tiktok.com/@alvarezjessica76" target="_blank" rel="noopener"> Follow on TikTok </a> </div> <script> $(function () { // 1) Build Jessica faux player (Post 1-12-2) RH.initSkinPlayer({ id: 'clipK', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+1-12-2+Park+Snatch.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+1-12-2+Park+Snatch.jpg', title: 'Jessica Live — Post 1-12-2', user: '@alvarezjessica76', vid: 'jess_post_1-12-2', controlsPosition: 'below' }); // 2) Layout RH.autoLayoutMedia('media-jess1_12_2'); // 3) Y/N/M/O routing for this post const routes = { Y: 'jess_post 1-12-2', // stays here N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-jess1_12_2').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Optional: global watch counter if (RH.mountCounter) { RH.mountCounter(); } // 5) Auto-play this clip and jump to Merrick console when it ends const video = $('#clipK').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('mmm_agent'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-jess1_12_2 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-jess1_12_2 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: mmm_merr_post 2 <div class="rh-media" id="media-merrick2"> <div class="rh-player-wrap"> <div id="merrickClip2"></div> </div>  <div id="agent-merrick2" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://x.com/Merrick_CID" target="_blank" rel="noopener"> Follow on X </a> </div> <script> $(function () { // 1) Faux X / Twitter-style player RH.initSkinPlayer({ id: 'merrickClip2', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick%201080p/MMM%20post%202%20Radio%20Conflict.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick%201080p/MMM%20post%202%20Radio%20Conflict.jpg', title: 'Merrick Cam — Radio Conflict', user: '@Merrick_CID', vid: 'merr_post_2', // ✅ matches CLIP_NEXT / CLIP_PREV maps controlsPosition: 'below' // ✅ lets faux-nav inject ◀ / ▶ under frame }); // 2) Layout: auto, then force stacked (no side-by-side) RH.autoLayoutMedia('media-merrick2'); $('#media-merrick2').removeClass('side'); // 3) Y/N/M/O routing — same destinations as Merrick 1 / Jessica pattern const routes = { Y: 'jess_post_1', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-merrick2') .off('click.merr2') .on('click.merr2', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target && window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play(target); } }); // 4) Global 00/20 counter if (window.RH && typeof RH.mountCounter === 'function') { RH.mountCounter(); } // 5) Autoplay + auto-advance to merr_post_3 when done const video = $('#merrickClip2').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play('merr_post_3'); } }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-merrick2 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-merrick2 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: mmm_merr_post 3 <div class="rh-media" id="media-merrick3"> <div class="rh-player-wrap"> <div id="merrickClip3"></div> </div>  <div id="agent-merrick3" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://x.com/Merrick_CID" target="_blank" rel="noopener"> Follow on X </a> </div> <script> $(function () { // 1) Faux X / Twitter-style player RH.initSkinPlayer({ id: 'merrickClip3', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+3+Loss+of+Control.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick%201080p/MMM%20post%203%20Loss%20of%20Control.jpg', title: 'Merrick Cam — Loss of Control', user: '@Merrick_CID', vid: 'merr_post_3', // ✅ matches CLIP_NEXT / CLIP_PREV IDs controlsPosition: 'below' // ✅ let faux-nav inject ◀ / ▶ under frame }); // 2) Layout: auto, then force stacked layout (no side-by-side) RH.autoLayoutMedia('media-merrick3'); $('#media-merrick3').removeClass('side'); // 3) Y/N/M/O routing — same canonical pattern as Merrick 1/2 & Jessica const routes = { Y: 'jess_post_1', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-merrick3') .off('click.merr3') .on('click.merr3', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target && window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play(target); } }); // 4) Global 00/20 counter if (window.RH && typeof RH.mountCounter === 'function') { RH.mountCounter(); } // 5) Autoplay + auto-advance to merr_post_4 when done const video = $('#merrickClip3').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play('merr_post_4'); } }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-merrick3 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-merrick3 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: mmm_merr_post 4 <div class="rh-media" id="media-merrick4"> <div class="rh-player-wrap"> <div id="merrickClip4"></div> </div>  <div id="agent-merrick4" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://x.com/Merrick_CID" target="_blank" rel="noopener"> Follow on X </a> </div> <script> $(function () { // 1) Faux X / Twitter-style player RH.initSkinPlayer({ id: 'merrickClip4', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+4+perimeter+Lockdown.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick%201080p/MMM%20post%204%20Perimeter%20Lockdown.jpg', title: 'Merrick Cam — Perimeter Lockdown', user: '@Merrick_CID', vid: 'merr_post_4', // ✅ canonical clip id for nav map controlsPosition: 'below' // ✅ enable faux-nav ◀ / ▶ in control bar }); // 2) Layout: FORCE stacked layout (prevent off-screen shift) RH.autoLayoutMedia('media-merrick4'); $('#media-merrick4').removeClass('side'); // 3) Y/N/M/O routing — same canonical pattern as the other Merrick/Jess posts const routes = { Y: 'jess_post_1', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-merrick4') .off('click.merr4') .on('click.merr4', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target && window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play(target); } }); // 4) Global 00/20 counter if (window.RH && typeof RH.mountCounter === 'function') { RH.mountCounter(); } // 5) Autoplay + auto-advance to merr_post_6 when done const video = $('#merrickClip4').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play('merr_post_6'); } }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-merrick4 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-merrick4 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: mmm_merr_post 5 <div class="rh-media" id="media-merrick5"> <div class="rh-player-wrap"> <div id="merrickClip5"></div> </div>  <div id="agent-merrick5" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://x.com/Merrick_CID" target="_blank" rel="noopener"> Follow on X </a> </div> <script> $(function () { // 1) Faux X / Twitter-style player RH.initSkinPlayer({ id: 'merrickClip5', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+5+Dashcam+follow.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick%201080p/MMM%20post%205%20Dashcam.jpg', title: 'Merrick Cam — Dashcam Follow', user: '@Merrick_CID', vid: 'merrick_post_5' }); // 2) Layout: force stacked layout (no side-by-side) RH.autoLayoutMedia('media-merrick5'); $('#media-merrick5').removeClass('side'); // 3) Y/N/M/O routing — match Jessica/Merrick canonical routes const routes = { Y: 'jess_post_1', N: 'ldk_post_4', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-merrick5').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Controls under video $('#merrickClip5 .rh-frame').addClass('controls-below'); // 5) Global counter bubble if (RH.mountCounter) { RH.mountCounter(); } // 6) Autoplay + auto-advance to mmm_agent when done const video = $('#merrickClip5').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('mmm_agent'); }; } }); </script> <style> /* BACK TO MERRICK button pill style for this passage */ #agent-merrick5 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-merrick5 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: ldk_post 2 <div class="rh-media" id="media-ldk2"> <div class="rh-player-wrap"> <div id="yt2"></div> </div>  <div id="agent-ldk2" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div>  <div class="rh-player-links"> <a href="https://youtube.com/@OuterMethod/playlists" target="_blank" rel="noopener"> Subscribe on YouTube </a> </div> <script> $(function () { // 1) Faux YouTube-style player (16:9) RH.initSkinPlayer({ id: 'yt2', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+2+cage+reveal.mp4', // poster: 'https://YOUR-S3/frame-yt.jpg', title: 'Miss Murder Me — LDK Post 2', user: '@OuterMethod', vid: 'ldk_post_2' // unique ID for 00/20 counter }); // 2) Layout: call autoLayout, then FORCE stacked layout RH.autoLayoutMedia('media-ldk2'); $('#media-ldk2').removeClass('side'); // 3) Y/N/M/O routing — same pattern as ldk_post 1 const routes = { Y: 'jess_post_1', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-ldk2').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Controls under video $('#yt2 .rh-frame').addClass('controls-below'); // 5) Global 00/20 counter bubble if (RH.mountCounter) { RH.mountCounter(); } // 6) Autoplay + auto-advance to ldk_post_3 when done const video = $('#yt2').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('ldk_post_3'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-ldk2 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-ldk2 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: ldk_post 3 <div class="rh-media" id="media-ldk3"> <div class="rh-player-wrap"> <div id="yt3"></div> </div>  <div id="agent-ldk3" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div>  <div class="rh-player-links"> <a href="https://youtube.com/@OuterMethod/playlists" target="_blank" rel="noopener"> Subscribe on YouTube </a> </div> <script> $(function () { // 1) Faux YouTube-style player (16:9) RH.initSkinPlayer({ id: 'yt3', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+3+In+corner.mp4', // poster: 'https://YOUR-S3/frame-yt.jpg', title: 'Miss Murder Me — LDK Post 3', user: '@OuterMethod', vid: 'ldk_post_3' // unique ID for 00/20 counter }); // 2) Layout: call autoLayout, then FORCE stacked layout RH.autoLayoutMedia('media-ldk3'); $('#media-ldk3').removeClass('side'); // 3) Y/N/M/O routing — same pattern as the other LDK posts const routes = { Y: 'jess_post_1', N: 'ldk_post_2', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-ldk3').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Controls under the video $('#yt3 .rh-frame').addClass('controls-below'); // 5) Global 00/20 counter bubble if (RH.mountCounter) { RH.mountCounter(); } // 6) Autoplay + auto-advance to ldk_post_4 when done const video = $('#yt3').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('ldk_post_4'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-ldk3 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-ldk3 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: ldk_post 4 <div class="rh-media" id="media-ldk4"> <div class="rh-player-wrap"> <div id="yt4"></div> </div>  <div id="agent-ldk4" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div>  <div class="rh-player-links"> <a href="https://youtube.com/@OuterMethod/playlists" target="_blank" rel="noopener"> Subscribe on YouTube </a> </div> <script> $(function () { // 1) Faux YouTube-style player (16:9) RH.initSkinPlayer({ id: 'yt4', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+4+In+corner.mp4', // poster: 'https://YOUR-S3/frame-yt.jpg', title: 'Miss Murder Me — LDK Post 4', user: '@OuterMethod', vid: 'ldk_post_4' // unique ID for 00/20 counter }); // 2) Layout: call autoLayout, then FORCE stacked layout RH.autoLayoutMedia('media-ldk4'); $('#media-ldk4').removeClass('side'); // 3) Y/N/M/O routing — mirror other LDK posts const routes = { Y: 'jess_post_1', N: 'ldk_post_3', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-ldk4').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Controls under the video $('#yt4 .rh-frame').addClass('controls-below'); // 5) Global 00/20 counter bubble if (RH.mountCounter) { RH.mountCounter(); } // 6) Autoplay + auto-advance to LDK Post 5 when done const video = $('#yt4').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('ldk_post_5'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-ldk4 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-ldk4 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: ldk_post 5 <div class="rh-media" id="media-ldk5"> <div class="rh-player-wrap"> <div id="yt5"></div> </div>  <div id="agent-ldk5" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div>  <div class="rh-player-links"> <a href="https://youtube.com/@OuterMethod/playlists" target="_blank" rel="noopener"> Subscribe on YouTube </a> </div> <script> $(function () { // 1) Faux YouTube-style player (16:9) RH.initSkinPlayer({ id: 'yt5', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+5+Martyrdom.mp4', // poster: 'https://YOUR-S3/frame-yt.jpg', title: 'Miss Murder Me — LDK Post 5', user: '@OuterMethod', vid: 'ldk_post_5' // unique ID for 00/20 counter }); // 2) Layout: call autoLayout, then FORCE stacked layout RH.autoLayoutMedia('media-ldk5'); $('#media-ldk5').removeClass('side'); // 3) Y/N/M/O routing — mirror other LDK posts const routes = { Y: 'jess_post_1', N: 'ldk_post_4', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-ldk5').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Controls under the video $('#yt5 .rh-frame').addClass('controls-below'); // 5) Global 00/20 counter bubble if (RH.mountCounter) { RH.mountCounter(); } // 6) Autoplay + auto-advance to LDK Post 8 when done const video = $('#yt5').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('ldk_post_8'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-ldk5 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-ldk5 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: ldk_post 7 <div class="rh-media" id="media-ldk7"> <div class="rh-player-wrap"> <div id="yt7"></div> </div>  <div id="agent-ldk7" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div>  <div class="rh-player-links"> <a href="https://youtube.com/@OuterMethod/playlists" target="_blank" rel="noopener"> Subscribe on YouTube </a> </div> <script> $(function () { // 1) Faux YouTube-style player (16:9) RH.initSkinPlayer({ id: 'yt7', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+7+Forced+Entry.mp4', // poster: 'https://YOUR-S3/frame-yt.jpg', title: 'Miss Murder Me — LDK Post 7', user: '@OuterMethod', vid: 'ldk_post_7' // unique ID for 00/20 counter }); // 2) Layout: call autoLayout, then FORCE stacked layout RH.autoLayoutMedia('media-ldk7'); $('#media-ldk7').removeClass('side'); // 3) Y/N/M/O routing (match the LDK pattern from 5/8) const routes = { Y: 'jess_post_1', N: 'ldk_post_4', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-ldk7').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Controls under the video $('#yt7 .rh-frame').addClass('controls-below'); // 5) Global 00/20 counter bubble if (RH.mountCounter) { RH.mountCounter(); } // 6) Autoplay + auto-advance to mmm_agent when done const video = $('#yt7').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('mmm_agent'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-ldk7 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-ldk7 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: ldk_post 8 <div class="rh-media" id="media-ldk8"> <div class="rh-player-wrap"> <div id="yt8"></div> </div>  <div id="agent-ldk8" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div>  <div class="rh-player-links"> <a href="https://youtube.com/@OuterMethod/playlists" target="_blank" rel="noopener"> Subscribe on YouTube </a> </div> <script> $(function () { // 1) Faux YouTube-style player (16:9) RH.initSkinPlayer({ id: 'yt8', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+8+Escape+angle.mp4', // poster: 'https://YOUR-S3/frame-yt.jpg', title: 'Miss Murder Me — LDK Post 8', user: '@OuterMethod', vid: 'ldk_post_8' // unique ID for 00/20 counter }); // 2) Layout: call autoLayout, then FORCE stacked layout RH.autoLayoutMedia('media-ldk8'); $('#media-ldk8').removeClass('side'); // 3) Y/N/M/O routing — mirror LDK pattern const routes = { Y: 'jess_post_1', N: 'ldk_post_5', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-ldk8').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Controls under the video $('#yt8 .rh-frame').addClass('controls-below'); // 5) Global 00/20 counter bubble if (RH.mountCounter) { RH.mountCounter(); } // 6) Autoplay + auto-advance to Merrick console when done const video = $('#yt8').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('mmm_agent'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-ldk8 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-ldk8 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

{ ui: 'Jessica — Dog poster', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+2+Lost+Dog+Poster.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post X', user: '@alvarezjessica76', vid: 'jess_post_X' } { ui: 'Jessica —Threshold', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+3+Dog+Threshold.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post X', user: '@alvarezjessica76', vid: 'jess_post_X' } { ui: 'LDK — Cage Reveal', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+2+cage+reveal.mp4', poster: 'https://YOUR-S3/ldk_clip.jpg', title: 'Miss Murder Me — LDK Post X', user: '@OuterMethod', vid: 'ldk_post_X' } { ui: 'Jessica — Memory', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+4-5+Reveal-Memory.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post X', user: '@alvarezjessica76', vid: 'jess_post_X' } { ui: 'Merrick — Lost Control', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+3+Loss+of+Control.mp4', poster: 'https://YOUR-S3/merrick_clip.jpg', title: 'Merrick Cam — Post X', user: '@Merrick_CID', vid: 'merrick_post_X' } { ui: 'LDK — The Corner, skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+4+In+corner.mp4, poster: 'https://YOUR-S3/ldk_clip.jpg', title: 'Miss Murder Me — LDK Post X', user: '@OuterMethod', vid: 'ldk_post_X' } { ui: 'Jessica — Jessica's Offer', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+6+Jessica's+offer.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post X', user: '@alvarezjessica76', vid: 'jess_post_X' } { ui: 'Jessica — Phone Death, skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+7-8+Phone+to+Death.mp4, poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post X', user: '@alvarezjessica76', vid: 'jess_post_X' } { ui: 'LDK — Escape', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+8+Escape+angle.mp4', poster: 'https://YOUR-S3/ldk_clip.jpg', title: 'Miss Murder Me — LDK Post X', user: '@OuterMethod', vid: 'ldk_post_X' } { ui: 'Merrick — Lockdown, skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+4+perimeter+Lockdown.mp4', poster: 'https://YOUR-S3/merrick_clip.jpg', title: 'Merrick Cam — Post X', user: '@Merrick_CID', vid: 'merrick_post_X' }

:: full_case_file  <div class="rh-media" id="media-fullcase"> <div class="rh-player-wrap"> <div id="fullCase"></div> </div> </div>  <div class="rh-player-links fullcase-links"> <span class="agent-back-wrap fullcase-back"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> <script> window.RH = window.RH || {}; $(function () { // Build the faux player for the pre-cut sequence RH.initSkinPlayer({ id: 'fullCase', skin: 'yt', // 16:9 "YouTube-style" frame aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/full_case_file.mp4', title: 'Miss Murder Me — Full Case File', user: '@OuterMethod', vid: 'full_case_file', controlsPosition: 'below' // keep transport under the frame }); // Layout the player using our standard helper if (RH.autoLayoutMedia) { RH.autoLayoutMedia('media-fullcase'); $('#media-fullcase').removeClass('side'); // force stacked if needed } // Optional: mount the global watch counter if available if (RH.mountCounter) { RH.mountCounter(); } // Hook the underlying <video> so we jump to mmm_agent when done const $wrap = $('#fullCase'); const video = $wrap.find('video').get(0); if (video) { // Try to autoplay with sound on (user gesture may still be required on mobile) video.muted = false; video.play().catch(() => { // If blocked, user can manually tap play. }); video.onended = function () { // When the sequence finishes, send player to the Merrick agent passage SugarCube.Engine.play('mmm_agent'); }; } }); </script> <style> /* BACK TO MERRICK pill style for full_case_file */ .fullcase-back .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .fullcase-back .macro-link:hover { background: rgba(255,255,255,.12); } .fullcase-links { margin-top: 0.75rem; text-align: center; } </style>

:: mmm_pov_mode <div class="rh-media" id="pov-media"> <div class="rh-player-wrap">  <div id="povJess" class="pov-player pov-active"></div> <div id="povMerrick" class="pov-player"></div> <div id="povLDK" class="pov-player"></div> </div> </div>  <div class="pov-ctrl-bar"> <div class="pov-left"> <div class="pov-toggle-label">TOGGLE HERE FOR LIVE VIEW</div> <div class="pov-buttons"> <button class="pov-btn pov-btn-active" id="btnJess">JESSICA POV</button> <button class="pov-btn" id="btnMerrick">MERRICK POV</button> <button class="pov-btn" id="btnLDK">LDK POV</button> </div> </div> <div class="pov-status"> <span class="pov-label" id="povLabel">Jessica — Live Stream</span> <span class="pov-time" id="povTimecode">00:00</span> </div> </div>  <div class="rh-player-links pov-links"> <span class="agent-back-wrap pov-back"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> <<script>> (function () { // Prevent double-wiring if SugarCube re-renders this passage if (window._mmmPovWired) return; window._mmmPovWired = true; $(document).on(':passagedisplay', function () { if (SugarCube.State.passage !== 'mmm_pov_mode') return; // --- 1. Build three faux players once --- if (!$('#povJess video').length) { RH.initSkinPlayer({ id: 'povJess', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/jessica_pov_mode.mp4', title: 'Jessica — Live POV', user: '@alvarezjessica76', vid: 'pov_jessica', controlsPosition: 'below' }); RH.initSkinPlayer({ id: 'povMerrick', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/merrick_pov_mode.mp4', title: 'Merrick — Surveillance POV', user: '@Merrick_CID', vid: 'pov_merrick', controlsPosition: 'below' }); RH.initSkinPlayer({ id: 'povLDK', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/ldk_pov_mode.mp4', title: 'LDK — Killer POV', user: '@OuterMethod', vid: 'pov_ldk', controlsPosition: 'below' }); } // IMPORTANT: do NOT autoLayout here; POV stays stacked $('#pov-media').removeClass('side'); // --- 2. Internal state + helpers --- let activeKey = 'jess'; // 'jess' | 'merrick' | 'ldk' let lastTime = 0; // shared timecode in seconds const players = { jess: $('#povJess').find('video').get(0) || null, merrick: $('#povMerrick').find('video').get(0) || null, ldk: $('#povLDK').find('video').get(0) || null }; const labels = { jess: 'Jessica — Live Stream', merrick: 'Merrick — Surveillance', ldk: 'LDK — Killer Cam' }; const $label = $('#povLabel'); const $time = $('#povTimecode'); function formatTime(t) { t = Math.max(0, t | 0); const m = (t / 60) | 0; const s = (t % 60) | 0; const mm = m < 10 ? '0' + m : '' + m; const ss = s < 10 ? '0' + s : '' + s; return mm + ':' + ss; } function updateTimecode(t) { lastTime = t; $time.text(formatTime(t)); } // Keep timecode in sync with active video Object.keys(players).forEach(key => { const video = players[key]; if (!video || video.dataset.rhPovWired) return; video.dataset.rhPovWired = '1'; video.addEventListener('timeupdate', function () { if (key === activeKey) { updateTimecode(video.currentTime || 0); } }); }); function setActiveKey(newKey) { if (!players[newKey] || newKey === activeKey) return; const oldKey = activeKey; const oldVid = players[oldKey]; const newVid = players[newKey]; // 1) Capture time from old POV if (oldVid && !isNaN(oldVid.currentTime)) { lastTime = oldVid.currentTime; try { oldVid.pause(); } catch (e) {} } // 2) Toggle visibility $('.pov-player').removeClass('pov-active'); if (newKey === 'jess') $('#povJess').addClass('pov-active'); if (newKey === 'merrick') $('#povMerrick').addClass('pov-active'); if (newKey === 'ldk') $('#povLDK').addClass('pov-active'); // 3) Update button highlight + label $('.pov-btn').removeClass('pov-btn-active'); if (newKey === 'jess') $('#btnJess').addClass('pov-btn-active'); if (newKey === 'merrick') $('#btnMerrick').addClass('pov-btn-active'); if (newKey === 'ldk') $('#btnLDK').addClass('pov-btn-active'); $label.text(labels[newKey] || 'POV'); // 4) Seek new POV to same time, then play function seekAndPlay() { try { if (!isNaN(lastTime)) { newVid.currentTime = lastTime; } newVid.play().catch(() => { // Autoplay may still need user tap }); } catch (e) { // ignore } } if (newVid.readyState >= 2) { seekAndPlay(); } else { const onMeta = function () { newVid.removeEventListener('loadedmetadata', onMeta); seekAndPlay(); }; newVid.addEventListener('loadedmetadata', onMeta); } activeKey = newKey; } // Wire POV buttons (clear old handlers first) $('#btnJess').off('click.mmmPov').on('click.mmmPov', function () { setActiveKey('jess'); }); $('#btnMerrick').off('click.mmmPov').on('click.mmmPov', function () { setActiveKey('merrick'); }); $('#btnLDK').off('click.mmmPov').on('click.mmmPov', function () { setActiveKey('ldk'); }); // --- 3. Prime Merrick + LDK as soon as Jessica actually starts playing --- const startVid = players.jess; if (startVid && !startVid.dataset.rhPovStartWired) { startVid.dataset.rhPovStartWired = '1'; let primedOthers = false; function primeOthers() { if (primedOthers) return; primedOthers = true; ['merrick', 'ldk'].forEach(function (key) { const v = players[key]; if (!v) return; try { v.muted = true; const p = v.play(); if (p && typeof p.then === 'function') { p.then(function () { v.pause(); v.currentTime = 0; v.muted = false; }).catch(function () {}); } else { v.pause(); v.currentTime = 0; v.muted = false; } } catch (e) {} }); } startVid.addEventListener('play', primeOthers, { once: true }); // Start on Jessica POV (may require user gesture) startVid.play().catch(() => { // when user taps PLAY, 'play' event will still prime others }); } }); })(); <</script>> <style> /* Only one POV player visible at a time */ .pov-player { display: none; } .pov-player.pov-active { display: block; } #pov-media { width: 100%; margin: 0 auto; } #pov-media .rh-player-wrap { max-width: min(1100px, 100vw); margin: 0 auto; } #pov-media .rh-frame { margin: 0 auto; } .pov-ctrl-bar { width: 100%; max-width: min(1100px, 100vw); margin: 0.75rem auto 0 auto; padding: 0 0.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; font: 700 12px ui-monospace, Menlo, Consolas, monospace; color: #fff; } .pov-left { display: flex; flex-direction: column; gap: 0.25rem; } .pov-toggle-label { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.75; } .pov-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; } .pov-btn { border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; padding: 0.4em 0.7em; border-radius: 6px; cursor: pointer; letter-spacing: 0.04em; } .pov-btn:hover { background: rgba(255,255,255,.12); } .pov-btn-active { border-color: rgba(255,0,0,.6); background: rgba(255,0,0,.25); } .pov-status { display: flex; align-items: center; gap: 0.75rem; opacity: 0.9; } .pov-time { font-variant-numeric: tabular-nums; padding: 0.2em 0.6em; border-radius: 4px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.25); } @media (max-width: 640px) { .pov-ctrl-bar { flex-direction: column; align-items: flex-start; } } .pov-back .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .pov-back .macro-link:hover { background: rgba(255,255,255,.12); } .pov-links { margin-top: 0.75rem; text-align: center; } </style>

:: mmm_gps_clue <<set $mmmAfterGPS to true>> <p id="gps-status">Checking your location…</p> <p id="gps-debug"></p> <div id="gps-map" style="width:100%; height:300px; border:1px solid #444;"></div>  <div class="gps-proceed"> <<link "PROCEED">> <<if $nearClue>> <<goto "mmm_jess_gps">> <<else>> <<goto "tryagain">> <</if>> <</link>> </div>  <div class="rh-player-links gps-links"> <span class="agent-back-wrap gps-back"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> <<script>> (function () { const clueLat = 33.96240; const clueLon = -118.45110; const detectionRadius = 10; // real-world radius in feet const desktopOverride = true; // ☑ allow 0-ft testing from desktop // Distance helper (Haversine) function getDistanceInFeet(lat1, lon1, lat2, lon2) { const R = 6371; const dLat = (lat2 - lat1) * Math.PI / 180; const dLon = (lon2 - lon1) * Math.PI / 180; const a = Math.sin(dLat/2)**2 + Math.cos(lat1*Math.PI/180)*Math.cos(lat2*Math.PI/180) * Math.sin(dLon/2)**2; const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); return R * c * 3280.84; // km → ft } // ---- Desktop override ---- if (desktopOverride && !navigator.geolocation) { console.log("[GPS] Desktop override active → auto-success."); State.variables.nearClue = true; document.getElementById("gps-status").textContent = "🎯 Clue Nearby! (desktop test)"; document.getElementById("gps-debug").textContent = "Desktop browser – GPS override forced success."; return; } navigator.geolocation.getCurrentPosition( function (pos) { const lat = pos.coords.latitude; const lon = pos.coords.longitude; State.variables.userLat = lat; State.variables.userLon = lon; const dist = getDistanceInFeet(lat, lon, clueLat, clueLon); document.getElementById("gps-debug").textContent = "Lat " + lat.toFixed(5) + " / Lon " + lon.toFixed(5) + " — Distance: " + Math.round(dist) + " ft"; if (dist <= detectionRadius) { State.variables.nearClue = true; document.getElementById("gps-status").textContent = "🎯 Clue Nearby!"; } else { State.variables.nearClue = false; document.getElementById("gps-status").textContent = "❌ No clue found."; } // Map const map = new google.maps.Map(document.getElementById("gps-map"), { center: { lat, lng: lon }, zoom: 18, mapTypeId: "satellite", }); // Player new google.maps.Marker({ position: { lat, lng: lon }, map, title: "You are here", icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png" }); // Clue new google.maps.Marker({ position: { lat: clueLat, lng: clueLon }, map, title: "Clue location" }); // Radius new google.maps.Circle({ map, center: { lat: clueLat, lng: clueLon }, radius: detectionRadius * 0.3048, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.25 }); }, function (error) { document.getElementById("gps-status").textContent = "⚠️ GPS error: " + error.message; // Desktop override fallback if (desktopOverride) { console.log("[GPS] Using fallback override due to error."); State.variables.nearClue = true; document.getElementById("gps-debug").textContent = "Override success (GPS failed)."; } } ); })(); <</script>>  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5gygK_hFUXI0A5ihee-G_z_6cGgf7wZY"></script> <style> .gps-proceed { margin-top: 1rem; text-align: center; } .gps-proceed .macro-link { font-weight: 700; letter-spacing: 0.12em; } .gps-back .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; } .gps-back .macro-link:hover { background: rgba(255,255,255,.12); } .gps-links { margin-top: 0.75rem; text-align: center; } </style>

:: reset_progress [reset] <h2>Reset Miss Murder Me progress?</h2> <p>This will clear your watched video count, unlocks, and playtime clock on this device.</p> <<link "YES — wipe local progress">> <<run RH.resetProgress()>> <p>Progress cleared. Returning to Merrick…</p> <<goto "mmm_agent">> <</link>>

:: mmm_merr_post 6 <div class="rh-media" id="media-merrick6"> <div class="rh-player-wrap"> <div id="merrickClip6"></div> </div>  <div id="agent-merrick6" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://x.com/Merrick_CID" target="_blank" rel="noopener"> Follow on X </a> </div> <script> $(function () { // 1) Faux X / Twitter-style player (Bag & Tag, with poster) RH.initSkinPlayer({ id: 'merrickClip6', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+6+Bag+%26+tag.mp4', poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+6+Bag+%26+tag.jpg', title: 'Merrick Cam — Bag & Tag', user: '@Merrick_CID', vid: 'merr_post_6', // ✅ clip id for nav map controlsPosition: 'below' // ✅ enable faux-nav ◀ / ▶ in control bar }); // 2) Layout: FORCE stacked layout (prevent off-screen shift) RH.autoLayoutMedia('media-merrick6'); $('#media-merrick6').removeClass('side'); // 3) Y/N/M/O routing — same canonical pattern as other Merrick/Jess posts const routes = { Y: 'jess_post_1', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-merrick6') .off('click.merr6') .on('click.merr6', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target && window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play(target); } }); // 4) Global 00/20 counter if (window.RH && typeof RH.mountCounter === 'function') { RH.mountCounter(); } // 5) Autoplay + auto-advance to mmm_agent when done const video = $('#merrickClip6').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play('mmm_agent'); } }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-merrick6 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-merrick6 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: mmm_jess_gps <div class="rh-media" id="media-jess5"> <div class="rh-player-wrap"> <div id="clipE"></div> </div>  <div id="agent-jess5" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://tiktok.com/@alvarezjessica76" target="_blank" rel="noopener"> Follow on TikTok </a> </div> <script> $(function () { // 1) Build Jessica faux player (GPS unlock — "I'm back") RH.initSkinPlayer({ id: 'clipE', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+9+I\'m+back.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+9+I\'m+back.jpg', title: 'Jessica Live — Post 9 (GPS Unlock)', user: '@alvarezjessica76', vid: 'jess_post_9', controlsPosition: 'below' }); // 2) Layout (same wrapper + sizing as jess_post_7-8) RH.autoLayoutMedia('media-jess5'); // 3) Y/N/M/O routing for this GPS post const routes = { Y: 'jess_post 9', // stays in Jessica lane (GPS post) N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-jess5').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target && window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play(target); } }); // 4) Optional: global watch counter if (RH.mountCounter) { RH.mountCounter(); } // 5) Auto-play this clip and jump back to Merrick console when it ends const video = $('#clipE').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play('mmm_agent'); } }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-jess5 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-jess5 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

<div class="rh-media" id="mmm-intro-media"> <div class="rh-player-wrap"> <div id="introClip"></div> </div> </div> <script> $(function () { // 1) Build faux player for the intro RH.initSkinPlayer({ id: 'introClip', skin: 'yt', // widescreen frame; can switch to 'tt' if you prefer aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/Miss+Murder+Me+Intro.mp4', title: 'Miss Murder Me — Intro', user: '@OuterMethod', vid: 'mmm_intro', controlsPosition: 'below' }); // 2) Layout + force stacked, then make it fill the viewport if (RH.autoLayoutMedia) { RH.autoLayoutMedia('mmm-intro-media'); } $('#mmm-intro-media').removeClass('side'); // 3) Optional global counter if (RH.mountCounter) { RH.mountCounter(); } // 4) Autoplay + auto-advance to mmm_agent, try for fullscreen once const $frame = $('#introClip .rh-frame'); const video = $('#introClip').find('video').get(0); if (video) { // try autoplay with sound on; mobile may still require user interaction video.muted = false; video.play().catch(() => { // user can tap PLAY if blocked }); // attempt fullscreen on first play (browsers may ignore if no gesture) const fsTarget = $frame.get(0) || video; const onPlay = function () { video.removeEventListener('play', onPlay); if (fsTarget && fsTarget.requestFullscreen) { fsTarget.requestFullscreen().catch(() => {}); } }; video.addEventListener('play', onPlay); // when intro finishes, go to Merrick console video.onended = function () { if (document.fullscreenElement && document.exitFullscreen) { document.exitFullscreen().catch(() => {}); } SugarCube.Engine.play('mmm_agent'); }; } }); </script>

<div id="about-wrap"> <div id="about-content"> <div id="mmm-text" data-typewriter="true"> <p>This sequence is currently in a restricted preview for partners, investors, and AWS review.</p> <p>To request access to the live interactive demo, contact <a href="mailto:jason@rabbitholestory.com">jason@rabbitholestory.com</a>. </p> </div> <br><br> <a class="back-btn" onclick='SugarCube.Engine.play("mmmhome")'>BACK</a> </div> </div>  <div id="code-gate"> <input id="codeInput" type="text" placeholder="Enter Code"> <button id="submitCode">SUBMIT</button> <div id="codeResponse"></div> </div> <<script>> (function () { function handleCode() { var code = jQuery('#codeInput').val().trim().toLowerCase(); var $resp = jQuery('#codeResponse'); if (!code) { return; } if (code === 'squat') { $resp.text(''); SugarCube.Engine.play('squat'); } else if (code === 'mmmbeta') { $resp.text(''); SugarCube.Engine.play('mmm_intro'); } else { $resp.text('Wrong code. Try again.'); } } jQuery(function () { jQuery('#submitCode').off('.codegate').on('click.codegate', function (ev) { ev.preventDefault(); handleCode(); }); jQuery('#codeInput').off('.codegate').on('keydown.codegate', function (ev) { if (ev.key === 'Enter') { ev.preventDefault(); handleCode(); } }); }); })(); <</script>> <style> /* 🔥 Full-page background image */ #about-wrap { position: relative; width: 100%; min-height: 100vh; background-image: url('https://i.imgur.com/6ctu2SX.jpeg'); background-size: cover; background-position: center center; background-repeat: no-repeat; display: flex; justify-content: center; align-items: center; padding: 2rem; } /* Keep content readable over the image */ #about-content { max-width: 600px; background: rgba(0,0,0,0.55); padding: 2rem; border-radius: 8px; backdrop-filter: blur(3px); } #mmm-text p { color: #fff; line-height: 1.45; } #code-gate { margin-top: 1.5rem; text-align: center; } #codeInput { padding: 0.6rem 0.8rem; width: 200px; border-radius: 6px; border: 1px solid #00e4ff; background: rgba(0,0,0,0.6); color: #fff; } #submitCode { padding: 0.6rem 1rem; margin-left: 0.5rem; border-radius: 6px; border: 1px solid #00e4ff; background: rgba(0,0,0,0.7); color: #fff; cursor: pointer; } #submitCode:hover { background: rgba(0,0,0,0.9); } #codeResponse { margin-top: 0.75rem; color: #ff6b6b; } .back-btn { color: #00e4ff; cursor: pointer; } </style>

<div id="gate-wrap"> <div id="gate-overlay"></div> <div id="gate-inner"> <div id="gate-label"> CASE FILE: <strong>MISS MURDER ME / BETA-01</strong> </div> <div id="gate-text"> ██ CASE STATUS: <strong>PENDING</strong> You’ve reached the end of this RabbitHole ARC demo. Detective Merrick has logged your viewing pattern, flagged your decisions, and pushed your session into the active case queue. Over the next phase, we’ll: • tune the clip routing • tighten the clue unlock timing • connect more AI-driven analysis behind Merrick’s terminal Your feedback as a beta tester directly decides what we change next. </div> <div id="gate-actions"> <span class="gate-back"> <p class="demo-end-note"><strong>END OF CURRENT DEMO BUILD.</strong></p> </span> <div id="gate-start-btn"> </div> </div> </div> </div> <p class="demo-end-link"> <<link "OPEN BETA FEEDBACK FORM">><<goto "mmm_beta_feedback">><</link>> <<link "RETURN TO RABBITHOLE HOME">><<goto "rabbithome">><</link>> </p> <style> /* Full-page case-file wrap with background image */ #gate-wrap { position: relative; width: 100%; min-height: 100vh; padding: 2rem; display: flex; justify-content: center; align-items: center; background-image: url('https://i.imgur.com/6ctu2SX.jpeg'); background-size: cover; background-position: center center; background-repeat: no-repeat; } #gate-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.75); } #gate-inner { position: relative; max-width: 720px; width: 100%; padding: 1.75rem 2rem; border-radius: 8px; background: rgba(0, 0, 0, 0.8); border: 1px solid rgba(0, 228, 255, 0.4); box-shadow: 0 0 35px rgba(0, 0, 0, 0.9); color: #fff; font-size: 0.95rem; line-height: 1.5; } #gate-label { font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: #00e4ff; margin-bottom: 1rem; } #gate-text { white-space: pre-line; /* keeps your line breaks + bullets */ margin-bottom: 1.5rem; } #gate-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; } .gate-back .macro-link { font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: #00e4ff; text-decoration: none; cursor: pointer; } .gate-back .macro-link:hover { text-decoration: underline; } #gate-start-btn .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.5em 1.4em; border-radius: 999px; border: 1px solid rgba(0, 228, 255, 0.8); background: rgba(0, 0, 0, 0.9); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; } #gate-start-btn .macro-link:hover { background: rgba(0, 228, 255, 0.18); } .demo-end-note, .demo-end-link { text-align: center; margin-top: 1rem; } .demo-end-link .macro-link { color: #00e4ff; text-decoration: none; } .demo-end-link .macro-link:hover { text-decoration: underline; } @media (max-width: 640px) { #gate-inner { padding: 1.4rem 1.1rem; } #gate-actions { flex-direction: column; align-items: flex-start; } } </style>

<div class="mmm-feedback-wrap"> <p>1. Copy the questions below into an email.</p> <p>2. Answer underneath each question in as much detail as you like.</p> <p>3. Send to <a href="mailto:jason@rabbitholestory.com">jason@rabbitholestory.com</a></p> <div class="beta-summary"> <p><strong>Session summary (approx.):</strong></p> <ul> <li>Total clips watched: <span id="beta-total-clips">—</span></li> <li>Time in demo: <span id="beta-total-mins">—</span> minutes</li> </ul> <p class="beta-note"></p> <p><strong>Basic setup</strong> — What device, browser, and connection were you using?<br> (Desktop/laptop or phone, OS, browser, headphones or speakers, approximate screen size.)</p> <p><strong>Technical performance</strong> — Did anything break or feel janky?<br> (video playback issues, audio glitches, lag, dead links, passages that stuck or repeated, problems, etc.)</p> <p><strong>GPS / clue unlocks</strong> — If you unlocked GPS or other hidden leads, did it feel earned and understandable?<br> If not, what would make those unlocks clearer?</p> <p><strong>Difficulty & guidance</strong> — Overall, was this:<br> too guided, about right, or too opaque / “figure it out yourself”?<br> What kind of hinting or UI affordances would improve the experience?</p> <p><strong>Emotional reaction</strong> — How did the demo make you feel?<br> (uneasy, thrilled, bored, overwhelmed, etc.)<br> Were there any moments that stuck with you after you finished?</p> <p><strong>Final thoughts</strong> — If you could change or add one thing before we show this to a cold audience, what would it be?</p> <br> <<link "RETURN TO RABBITHOLE HOME">><<goto "rabbithome">><</link>> </div> <style> .mmm-feedback-wrap { max-width: 850px; margin: 2rem auto; padding: 1rem 1.5rem; font-size: 0.95rem; line-height: 1.5; color: #fff; } .mmm-feedback-wrap hr { margin: 1.5rem 0; border: 0; border-top: 1px solid rgba(0, 228, 255, 0.3); } .mmm-feedback-wrap a { color:#00e4ff; text-decoration:none; } .mmm-feedback-wrap a:hover { text-decoration:underline; } </style>