A floating teleprompter for video calls. Read your notes while maintaining eye contact with the camera — the scrolling text floats above Microsoft Teams, Zoom, or any other app.
Two modes:
- Browser mode — works in Chrome/Edge, no install needed. The floating window has a dark background.
- Electron mode — truly transparent overlay. See your video call through the scrolling text. Move it, resize it, lock it in place.
Just want to use it? Download the standalone app — no Node.js, npm, or dev tools needed.
| Platform | Download |
|---|---|
| macOS (Intel + Apple Silicon) | Teleprompt-1.0.0-universal.dmg |
| Windows | Coming soon |
- Download and open the
.dmg - Drag Teleprompt to your Applications folder (or double-click to run directly)
- Paste or type your script in the editor
- Click Float (Transparent) — a transparent overlay appears on top of everything
- Position it near your webcam and click Play
Note: macOS may show a security warning since the app isn't signed. Right-click the app → Open → Open to bypass it.
If you want to run from source or contribute:
- Node.js 18+ — Download here
- Chrome 116+ or Edge 116+ (for browser mode)
git clone git@github.com:nakurian/teleprompt.git
cd teleprompt
npm installBest if you just want a floating text window with no extra setup.
npm run dev- Open http://localhost:3000 in Chrome or Edge
- Paste or type your script in the editor
- Click Float — a small floating window appears on top of other apps
- Click Play (or press
Space) to start scrolling - Position the floating window near your webcam
- Open Teams/Zoom — the floating window stays on top
Note: The floating window has a dark background. You can adjust the opacity, but you cannot see through it to the desktop. For a truly transparent overlay, use Electron mode.
Best for seeing your video call through the teleprompter text. The overlay is truly transparent — only the text is visible.
npm run electron:devThis opens the full app in its own window. Then:
- Paste or type your script in the editor
- Click Float (Transparent) — a transparent overlay appears on top of everything
- Drag the bar at the top of the overlay to move it where you want
- Drag any edge or corner of the overlay to resize it
- Click Lock in the overlay's top bar when you're happy with the position — clicks will now pass through to your desktop/Teams/Zoom below
- Press Cmd+Shift+L (Mac) or Ctrl+Shift+L (Windows/Linux) to unlock the overlay if you need to move it again
- Click Play in the main window (or press
Space) to start scrolling
| Action | How |
|---|---|
| Move overlay | Drag the thin bar at the top of the overlay |
| Resize overlay | Drag any edge or corner |
| Lock (click-through) | Click the "Lock" button in the overlay's top bar |
| Unlock | Press Cmd+Shift+L from anywhere (global shortcut) |
| Close overlay | Click "Unfloat" in the main window |
All controls are in the bar at the bottom of the main window.
| Control | What it does |
|---|---|
| Play / Pause | Start or stop auto-scrolling |
| Speed (1–10) | How fast the text scrolls (1 = slow crawl, 10 = fast) |
| Size (18–64px) | How big the text appears |
| BG (30–100%) | How dark the background is |
| Reset | Stop scrolling and jump back to the beginning |
| Edit / Prompter | Switch between the text editor and the scrolling view |
| Float / Unfloat | Open or close the floating overlay window |
| Key | What it does |
|---|---|
Space |
Play / Pause |
Arrow Up / Arrow Down |
Speed up / slow down |
+ / - |
Bigger / smaller text |
Escape |
Stop and jump to the beginning |
Cmd+Shift+L |
Lock / unlock the transparent overlay (Electron mode) |
Keyboard shortcuts don't work while you're typing in the text editor (so you can type normally).
- Keep sentences short — short lines are easier to read while glancing at the camera
- Use blank lines to create natural pauses between sections
- Position the overlay near your webcam so it looks like you're making eye contact
- Start at speed 2–3 and adjust as you get comfortable
- Paste from anywhere — formatting from websites (paragraphs, headings, lists) is automatically preserved as clean text
| Browser | Works? | Notes |
|---|---|---|
| Chrome 116+ | Yes | Full support |
| Edge 116+ | Yes | Full support |
| Firefox | No | Floating window API not available |
| Safari | No | Floating window API not available |
Electron mode works on macOS, Windows, and Linux regardless of browser.
To package the app as a standalone .dmg or .exe:
# macOS (.dmg — universal binary for Intel + Apple Silicon)
npm run electron:build:mac
# Windows (.exe — NSIS installer)
npm run electron:build:win
# Current platform
npm run electron:buildBuild output goes to the release/ directory.
- Next.js 16 with App Router
- React 19 + TypeScript
- Tailwind CSS v4
- Zustand for state management
- Electron for the transparent overlay mode
- Document Picture-in-Picture API for the browser floating window
- BroadcastChannel API for syncing state between Electron windows
src/
├── app/
│ ├── page.tsx # Main page — editor, controls, teleprompter
│ ├── overlay/page.tsx # Transparent overlay page (Electron mode)
│ ├── layout.tsx # Root layout
│ └── globals.css # Styles
├── components/
│ ├── Teleprompter.tsx # Scrolling text display
│ ├── TextEditor.tsx # Script input with paste support
│ ├── ControlBar.tsx # Playback and display controls
│ └── PipLauncher.tsx # Float button (auto-detects Electron vs browser)
├── hooks/
│ ├── useAutoScroll.ts # Smooth 60fps scroll engine
│ └── usePictureInPicture.ts # Browser floating window management
├── stores/
│ └── teleprompterStore.ts # Shared state with cross-window sync
└── types/
└── electron.d.ts # TypeScript types for Electron API
electron/
├── main.js # Electron main process (windows, shortcuts)
└── preload.js # Secure bridge between Electron and the web app
Private project.