Free Online Web Speech Teleprompter with Voice Scrolling

Project Overview

A professional-grade, browser-based Teleprompter application designed for content creators, presenters, and public speakers. The tool leverages the Web Speech API to provide hands-free scrolling, ensuring a natural presentation flow.

Core Features

• Voice-Activated Scrolling: Uses the Web Speech API to sync the scroll speed with the user's speaking rate.
• Manual Speed Control: Slider-based speed adjustment for those who prefer fixed-pace scrolling.
• Text Editor: A clean, distraction-free input area for pasting or typing scripts.
• Mirror Mode: A toggle to horizontally flip the text for use with professional physical teleprompter glass rigs.
• Text Customization: Adjustable font size, line spacing, and margin settings for optimal readability.
• High-Contrast Display: Optimized for clear reading in varying lighting conditions.

UI Layout

• Header: Contains the application title and a minimal toolbar for Global Settings (Font, Speed, Mirroring).
• Main Tool Area: A large, centered display pane for the script. When active, it transitions to a full-screen mode, hiding all controls except a floating 'Stop' button.
• Control Panel (Collapsible): Located at the bottom, providing access to speech recognition sensitivity, scroll speed fine-tuning, and play/pause functionality.

Aesthetics & Design

• Color Palette: Pristine light-mode theme using cool grays (#F8FAFC), crisp white backgrounds, and high-contrast dark slate text (#1E293B) for maximum readability.
• Typography: Clean, sans-serif fonts (e.g., Inter or system UI stacks) with generous line-height for comfort.
• Animations:
  • Smooth ease-in-out transitions for the UI overlays.
  • Fluid scroll animation without jitter, providing a 'floating' text effect.
  • Micro-interactions on buttons (subtle scaling and shadow changes) when active.

Technical Directives for Developer

• Strictly Single File: The entire application (HTML, CSS, JS) must be contained in a single index.html file.
• No Persistent Storage: Do not use localStorage, sessionStorage, cookies, or IndexedDB. All user inputs must remain strictly in-memory during the session.
• Sandbox Safety: Avoid any calls to alert(), prompt(), or confirm(). All user interactions must use custom-built HTML modals or standard UI components.
• Web Speech API: Ensure fallback handling if the browser does not support the API (display a polite notification to use a modern browser like Chrome or Edge).
• Responsive Constraints: The text container must dynamically resize based on the viewport, ensuring readability on both mobile phones and wide-screen desktop monitors.
• No Dark Mode: Do not implement a dark mode toggle. Maintain a clean, professional light-mode aesthetic throughout.