EyeLevel AI Teleprompter

tl;dr

EyeLevel ist ein browserbasierter, KI-nativer Teleprompter für moderne Video-Creator. Er kombiniert smoothes Auto-Scrolling per Sprachaktivierung, eine professionelle Aufnahme-Engine und KI-Skriptgenerierung via OpenRouter in einem Produkt, das komplett serverless auf Cloudflare Pages läuft. Das Geschäftsmodell setzt auf Lifetime Deals mit einem hybriden Credit-System, um KI-Kosten von der Einmalzahlung zu entkoppeln. Die App ist zweisprachig (EN/DE) und über einen 3-Stufen-Plan (Starter/Pro/Elite) monetarisiert.

Beschreibung

EyeLevel ist kein klassischer Teleprompter — er ist eine komplette Studio-Umgebung für Video-Ersteller. Der Kern ist ein leistungsstarkes, scrollendes Text-Overlay mit:

• Voice-Sensing: Das Skript scrollt nur, wenn du sprichst (Web Audio API, rein lokal).
• Eye-Level Fokus-Zone: Ein visueller Guide, der den Blick zur Kamera lenkt.
• Spiegel-Modus: Horizontal gespiegelter Text für Hardware-Teleprompter-Glas.
• HD-Aufnahme: Direkt im Browser mit MediaRecorder API.
• KI-Skript-Generierung: OpenRouter (Gemini Flash / Claude Sonnet) schreibt Skripte aus Stichworten.
• Drei Farbthemen: Classic, Amber (Oldschool-Vibe), High-Vis (Gelb auf Schwarz für draußen).
• Credit-System: 1 Credit pro KI-Generierung, 50 Credits im Elite-Paket, Top-Up möglich.

Dazu gibt es eine professionelle Landingpage mit Hero-Sektion, Feature-Bento-Grid, Video-Demo, Pricing-Table und Trust-Signalen.

Problemstellung

Content Creator stehen vor einem grundlegenden Dilemma:

1. Sie müssen frei und natürlich in die Kamera sprechen — sonst verlieren sie die Zuschauer.
2. Sie brauchen ein Skript — sonst vergessen sie Punkte, wiederholen sich oder werden unsicher.

Bestehende Lösungen sind entweder:

• Teuer (Bigvu ab $30/Monat, Teleprompter Pro ~$20/Monat mit Abo)
• Unflexibel (Hardware-Teleprompter sind ortsgebunden und teuer)
• Ohne KI (keine Skripthilfe, nur manuelles Scrollen)
• Datenschutzschwach (Cloud-Verarbeitung von Video/Audio)

Hinzu kommt: KI-Skriptgenerierung ist kein Differenzierungsmerkmal mehr — aber die Kombination aus Teleprompter + KI + Aufnahme + LTD-Preis ist es.

Idee

“Weniger lesen. Mehr bewirken.”

Die Idee: Einen Teleprompter zu bauen, der sich wie ein persönlicher Aufnahme-Assistent anfühlt. Kein starrer Text-Zeiler, sondern ein intelligentes System, das:

• Das Skript automatisch mit der eigenen Sprechgeschwindigkeit scrollt (Voice-Sensing)
• Die Kamera-Augenlinie perfekt hält (Fokus-Zone)
• Bei Bedarf KI-gestützt Skripte schreibt (Thema rein → fertiges Script raus)
• Alles in einem Browser-Tab erledigt — kein Download, keine Installation

Die Besonderheit: Das Produkt ist als Lifetime Deal (LTD) konzipiert, nicht als Abo. Das erfordert ein ausgeklügeltes Credit-System, damit die KI-Kosten nicht die Marge fressen.

Hypothese

1. Content Creator zahlen lieber einmalig als monatlich — wenn der Funktionsumfang stimmt, ist $79-$149 LTD attraktiver als $20/Monat.
2. KI-Skriptgenerierung ist kein reines Add-on, sondern ein Tier-Differenzierungsmerkmal — sie rechtfertigt den Premium-Preis (Elite).
3. Ein hybrides Credit-System (50 Credits inklusive, Top-Up bei Bedarf) verhindert API-Kosten-Explosion bei LTD-Kunden.
4. Die Wasserzeichen-Strategie („Made with EyeLevel“ auf Free-Aufnahmen) erzeugt organischen Traffic.
5. Serverless auf Cloudflare Pages skaliert auf Tausende Nutzer ohne Festkosten.

Ansatz

Architektur

flowchart LR
  subgraph Client["Browser (React 19 + Vite 7)"]
    Landing["Landing Page<br/>Hero · Features · Pricing"]
    Studio["Studio<br/>Teleprompter · Recording · AI"]
    i18n["i18next EN/DE"]
  end

  subgraph Cloudflare["Cloudflare Edge"]
    Pages["Cloudflare Pages<br/>(Static Assets + SPA)"]
    Functions["Cloudflare Functions<br/>(API Layer)"]
    D1[("Cloudflare D1<br/>SQLite Database")]
  end

  subgraph External["External Services"]
    Kinde["Kinde Auth<br/>(OAuth + JWT)"]
    Stripe["Stripe<br/>(Checkout + Webhooks)"]
    OpenRouter["OpenRouter<br/>(Gemini Flash / Claude)"]
  end

  Client -->|Static Files| Pages
  Client -->|REST API| Functions
  Functions --> D1
  Functions --> Kinde
  Functions --> Stripe
  Studio --> OpenRouter

  Landing -->|"Sign In / Up"| Kinde
  Studio -->|"Stripe Checkout"| Stripe

Datenfluss (Auth → Studio)

flowchart TD
  A["User öffnet App"] --> B["Kinde Auth Check"]
  B --> C{"Authentifiziert?"}
  C -->|Nein| D["Landing Page<br/>(Starter Zugriff)"]
  C -->|Ja| E["useAuthSession<br/>Session Bootstrap"]
  E --> F["useGuestDataMerge<br/>Lokale Entwürfe → D1"]
  F --> G["useScriptManagement<br/>Skripte laden"]
  G --> H["Studio: Render<br/>Abhängig von Tier"]
  H --> I["Starter: Basic Scroller<br/>Wasserzeichen"]
  H --> J["Pro: + Recording · Mirror<br/>Kein Wasserzeichen"]
  H --> K["Elite: + 50 AI Credits<br/>KI-Skriptgenerierung"]

Tech Stack

Datenmodell (D1)

-- Users (via migrations/0001_users.sql)
CREATE TABLE users (
  id TEXT PRIMARY KEY,
  stripe_customer_id TEXT,
  tier TEXT DEFAULT 'starter',   -- starter | pro | elite
  ai_credits INTEGER DEFAULT 0,
  onboarding_seen BOOLEAN DEFAULT FALSE
);

-- Scripts (via migrations/0002_scripts_settings.sql)
CREATE TABLE scripts (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  user_id TEXT NOT NULL REFERENCES users(id),
  title TEXT,
  content TEXT NOT NULL,
  created_at TEXT DEFAULT (datetime('now')),
  updated_at TEXT DEFAULT (datetime('now'))
);

CREATE TABLE settings (
  user_id TEXT PRIMARY KEY REFERENCES users(id),
  pace REAL DEFAULT 1.0,
  font_size INTEGER DEFAULT 24,
  theme TEXT DEFAULT 'classic'
);

Monetarisierung

Top-Up: 100 Credits für $19. KI-Kosten-Marge: >96%.

Erkenntnisse

1. LTD + KI ist ein Spagat. Die Lösung: Credits entkoppeln den API-Verbrauch von der Einmalzahlung. 50 Credits reichen für ~6 Monate bei durchschnittlicher Nutzung.
2. Voice-Sensing ist rein browserbasiert machbar. Die Web Audio API analysiert Dezibel-Level lokal — keine Cloud-Kosten, kein Datenschutzproblem, null Latenz.
3. Mobile Browser sind hart. Auto-Scrolling über scrollTop funktioniert auf iOS/Safari nicht zuverlässig. Lösung: CSS translateY()-basierte Animation mit GPU-Hardwarebeschleunigung.
4. Der Feature-Komplex ist gewachsen. Vom einfachen „Notch-Teleprompter“ (inspiriert von Moody) ist das Projekt über Voice-Steuerung → Aufnahme → Kamera-Spiegel → KI-Skripte → Pricing → i18n → Cloudflare-D1-Integration zu einer vollständigen SaaS-Plattform gewachsen.
5. Sicherheit war von Anfang an mitgedacht. Zod-Validierung für jede API-Antwort, DOMPurify für localStorage, JWT-Verifikation via JWKS, Timeouts für alle Fetch-Requests.
6. Der Entwicklungsprozess spiegelt „Trial & Error“. Drei Versionen des Studios (Legacy, Studio, StudioOptimized) zeigen, wie iterativ die UI gewachsen ist.

Persönliche Note

EyeLevel ist für mich ein besonderes Projekt, weil es zeigt, was heute mit browser-native APIs möglich ist. Kein Server für Voice-Analyse, kein Server für Recording — alles passiert im Browser des Users. Das ist nicht nur günstig, sondern auch ein echtes Datenschutz-Feature.

Der Name „EyeLevel“ kam von Claude — und er war sofort richtig. Das Produkt zwingt einen fast dazu, Augenhöhe mit der Kamera zu halten. Ich habe das selbst beim Testen gemerkt: Wenn die Fokus-Zone leuchtet, richtet man sich automatisch auf.

Was mir fehlt: Die Gaze-Correction-Idee aus den PRP-Dokumenten (MediaPipe FaceMesh + CNN-Warping) habe ich noch nicht integriert. Das wäre der nächste große Sprung — KI-gestützte Blickkorrektur in Echtzeit, sodass man nie vom Skript wegschauen muss. Aber das ist ein separates Projekt.

FAQ

Warum Cloudflare Pages statt Vercel?
Vercels Hobby-Plan verbietet kommerzielle Nutzung. Cloudflare Pages erlaubt sie explizit und hat kein Bandbreiten-Limit. Da wir direkt Stripe-Zahlungen akzeptieren, ist das rechtlich safer.

Warum ein LTD-Modell statt Abo?
Die Zielgruppe (Content Creator, AppSumo-Community) kauft lieber einmalig. Das Credit-System stellt sicher, dass schwere KI-Nutzer nicht unbegrenzt API-Kosten verursachen.

Kann man EyeLevel auch ohne KI nutzen?
Ja. Der Teleprompter (Auto-Scroll, Aufnahme, Spiegel) funktioniert im Starter- und Pro-Tier komplett ohne KI. KI ist nur im Elite-Tier aktiviert.

Welche KI-Modelle werden unterstützt?
Standard: Google Gemini 2.5 Flash (kostengünstig). Optional: Claude 3.5 Sonnet für 2 Credits pro Generierung (Power-User). Beide laufen über OpenRouter.

Ist die Sprachsteuerung datenschutzkonform?
Ja. Die Voice-Analyse läuft komplett lokal im Browser über die Web Audio API. Es werden keine Audiodaten an Server gesendet.

Wie viele Credits braucht man?
Ein durchschnittlicher Creator erstellt 1–3 KI-Skripte pro Woche. 50 Credits reichen für ~4–6 Monate. Ein Top-Up (100 Credits / $19) dann für ~8–12 Monate.

Kann ich EyeLevel auf dem Handy nutzen?
Ja — die App ist komplett responsiv. Der Teleprompter funktioniert im Hochformat, Settings erscheinen als Bottom Sheet. Kamera und Recording sind auf Mobilgeräten eingeschränkt, aber das reine Ablesen funktioniert gut.

Was kostet mich der Betrieb als Entwickler?
Cloudflare Pages Free Tier, D1 Free Tier (5 GB Speicher, 100k Reads/Tag), OpenRouter ~$0.05 für 50 Gemini-Generierungen, Stripe ~2.9% + $0.30 pro Transaktion. Die Betriebskosten sind nahe null.

Gibt es eine API für Drittanbieter?
Aktuell nur die internen Cloudflare Functions als API. Eine öffentliche API ist geplant, aber kein MVP-Feature.

Warum gibt es drei Studio-Varianten (Legacy, Studio, StudioOptimized)?
Das ist organisches Wachstum: Legacy war der erste Proof-of-Concept, Studio die erste Komplett-Version, StudioOptimized die finale, refaktorierte Fassung mit allen Produktions-Features.

Quellen

• Cloudflare Pages Documentation
• Cloudflare D1 Documentation
• Stripe Checkout API
• Kinde Auth SDK
• OpenRouter API Reference
• React 19 Documentation
• Vite 7 Release Notes
• Web Audio API (MDN)
• MediaRecorder API (MDN)