AutoCue Web and AutoCue Native with Remote

Overview

Content creators, specifically podcasters and desktop vloggers, often face a difficult balancing act: maintaining natural, engaging eye contact with the camera while accurately delivering long-form scripts. Existing solutions are often bloated, expensive, or rely on web-based scrolling engines that suffer from distracting visual micro-stuttering. AutoCue Pro was engineered to solve this. It is a lightweight, high-performance studio teleprompter platform consisting of a zero-latency web application and a completely offline native macOS desktop app.

The Challenge

When developing web-based teleprompters, the primary technical hurdle is the scrolling engine. Browsers notoriously round down fractional pixel movements when using standard setInterval loops, resulting in a jittery, stuttering text feed that causes eye strain and ruins takes. Furthermore, solo creators operate their own studio equipment; having to lean over to a keyboard to pause a script or adjust the speed breaks the flow of production and destroys eye contact.

The Solution

To provide a frictionless experience, we bypassed heavy JavaScript frameworks and built a highly optimised, vanilla JavaScript engine powered by a custom requestAnimationFrame loop. This ties the scroll rate directly to the monitor's hardware refresh rate, tracking exact decimal scroll positions to deliver sub-pixel smooth scrolling.

We paired this engine with a lean PHP 8 backend to handle local state management and routing, styling the entire interface with a modern, glassmorphic Tailwind CSS dark mode UI to reduce glare on the teleprompter glass.

Core Features & Innovations

Sub-Pixel Smooth Scroll: Utterly flawless, jitter-free text movement at any speed, completely eliminating the visual stutter associated with standard web prompters.
Zero-Install Smartphone Remote: By opening a lightweight web page on their phone, creators can wirelessly play/pause playback, tweak scroll speeds on the fly, and jump paragraph-by-paragraph through their script without ever stepping away from the camera.
Smart Script Parsing: A custom regex engine analyses the text in real-time as a session starts. It automatically detects stage directions enclosed in [square brackets], rendering them in a faded yellow italic font. Additionally, it dynamically assigns unique colour codes to different speakers (e.g., JOHN: and SARAH:), making multi-host podcast scripts incredibly easy to follow.
Hardware Mirroring & Drag-and-Drop: One-click horizontal flipping displays the text accurately when reflected in physical beam-splitter glass. Users can also instantly load scripts by dropping .txt or .md files directly into the browser.
Native macOS Application: Recognising that many professionals prefer offline tools, we packaged the frontend into a lightning-fast, native Mac application using Swift and Xcode (WKWebView). This separate 5MB desktop app runs entirely offline, utilising Apple's native local storage for saving scripts while maintaining the exact same sub-pixel performance as the web version.

The Technology Stack

Frontend: HTML5, Vanilla JavaScript (ES6+), Tailwind CSS.
Backend (Web): PHP 8 (for flat JSON file storage, remote state polling, and clean Apache/Nginx URL routing).
Desktop (Mac): Swift, SwiftUI, WKWebView (Offline standalone application).

The Result

AutoCue Pro proves that you do not need heavy databases or bloated frameworks to build a production-ready studio tool. By focusing on fundamental browser APIs and elegant architectural decisions, the platform delivers a premium, distraction-free environment that empowers creators to deliver flawless speeches without ever losing eye contact.

Keywords/Tags

Teleprompter Web App, PHP 8, Vanilla JavaScript, requestAnimationFrame, Tailwind CSS, Swift macOS App, WebKit, Multi-host Script Parsing, Remote Control WebSockets.