Name: TeleCuePro
Author: Livix

TeleCuePro Remote

Connecting…

Enter the session code
shown on the prompter

▶

TeleCuePro

● A Livix product

Your Script

0 words · ~0 min read

Scroll Settings

Speed

Scroll velocity (1–20)

Font Size

Prompter text (px)

Display

ALL CAPS

Transform to uppercase

Mirror Mode

Flip text for glass

Center Guide

Reading position line

Text Color

Font Style

Inter

DM Sans

Outfit

Keyboard Shortcuts

Space Play/Pause

Esc Stop

→ Speed Up

← Slow Down

↑ Rewind

↓ Forward

H Hide bar

Scroll Speed

Rewind

Play

Forward

Stop

Speed

Font

Remote

Overlay

H — hide controls

Overlay Mode

Background Opacity

55%

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0"><title>TeleCuePro Remote</title>
<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--a:#e8b84b;--a2:#c97d2e;--bg:#0d0d0d;--bg2:#161616;--bg3:#1e1e1e;--bd:rgba(255,255,255,0.1);--tx:#f0f0f0;--mu:rgba(255,255,255,0.45)}
html,body{height:100%;background:var(--bg);color:var(--tx);font-family:system-ui,Arial,sans-serif;overflow:hidden;user-select:none}
.wrap{display:flex;flex-direction:column;height:100vh;padding:20px;gap:14px}
.hdr{display:flex;align-items:center;justify-content:space-between}
.logo{font-size:17px;font-weight:700}.logo b{color:var(--a)}
.conn{font-size:11px;color:var(--mu);display:flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:#ef4444;transition:background 0.3s}
.dot.on{background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,0.5)}
.sbar{background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:14px 18px;display:flex;justify-content:space-between;flex-shrink:0}
.sl{font-size:10px;color:var(--mu);text-transform:uppercase;letter-spacing:.6px;margin-bottom:3px}
.sv{font-size:22px;font-weight:700;color:var(--a)}
.pbtn{flex-shrink:0;width:100%;height:96px;background:linear-gradient(135deg,var(--a),var(--a2));border:none;border-radius:18px;color:#000;font-size:36px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 6px 24px rgba(232,184,75,0.4);transition:transform .1s}
.pbtn:active{transform:scale(0.97)}
.pbtn.off{background:var(--bg2);border:2px solid var(--bd);color:var(--tx);box-shadow:none}
.plbl{font-size:19px;font-weight:700}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rb{height:68px;background:var(--bg2);border:1px solid var(--bd);border-radius:14px;color:var(--tx);font-size:26px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:all .12s}
.rb:active{background:var(--bg3);transform:scale(0.96)}
.rl{font-size:10px;color:var(--mu);text-transform:uppercase;letter-spacing:.5px}
.ctr{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--bd);border-radius:14px;padding:12px 16px}
.cl{font-size:11px;color:var(--mu);text-transform:uppercase;letter-spacing:.5px;flex:1}
.ca{width:36px;height:36px;background:var(--bg3);border:1px solid var(--bd);border-radius:50%;color:var(--tx);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s}
.ca:active{background:var(--a);color:#000}
.cn{font-size:21px;font-weight:700;min-width:32px;text-align:center}
.stpbtn{width:100%;height:48px;background:transparent;border:1px solid rgba(239,68,68,.3);border-radius:14px;color:rgba(239,68,68,.7);font-size:14px;font-weight:600;cursor:pointer;transition:all .12s}
.stpbtn:active{background:rgba(239,68,68,.1)}
</style></head>
<body><div class="wrap">
  <div class="hdr">
    <div class="logo">TeleCue<b>Pro</b> Remote</div>
    <div class="conn"><div class="dot" id="dot"></div><span id="cst">Connecting…</span></div>
  </div>
  <div class="sbar">
    <div><div class="sl">Status</div><div class="sv" id="sp">—</div></div>
    <div style="text-align:right"><div class="sl">Speed</div><div class="sv" id="ss">—</div></div>
  </div>
  <button class="pbtn off" id="pb" onclick="s('toggle')">
    <span id="pi">▶</span><span class="plbl" id="pl">Play</span>
  </button>
  <div class="g2">
    <button class="rb" onclick="s('rollBack')">⏮<span class="rl">Rewind</span></button>
    <button class="rb" onclick="s('rollFwd')">⏭<span class="rl">Forward</span></button>
  </div>
  <div class="ctr">
    <div class="cl">Speed</div>
    <button class="ca" onclick="s('speedDown')">−</button>
    <div class="cn" id="sv">—</div>
    <button class="ca" onclick="s('speedUp')">+</button>
  </div>
  <button class="stpbtn" onclick="s('reset')">⏹   Stop</button>
</div>
<script>
var ch=new BroadcastChannel('telecuepro_remote');
ch.onmessage=function(e){
  var d=e.data;if(d.type!=='state')return;
  var on=d.playing;
  document.getElementById('dot').className='dot on';
  document.getElementById('cst').textContent='Connected';
  document.getElementById('pi').textContent=on?'⏸':'▶';
  document.getElementById('pl').textContent=on?'Pause':'Play';
  var pb=document.getElementById('pb');
  on?pb.classList.remove('off'):pb.classList.add('off');
  document.getElementById('sp').textContent=on?'Playing':'Stopped';
  document.getElementById('ss').textContent=d.speed;
  document.getElementById('sv').textContent=d.speed;
};
function s(c){ch.postMessage({type:'cmd',cmd:c});}
ch.postMessage({type:'cmd',cmd:'ping'});
</script>
</body></html>