Die Zukunft von HTML5-Live-Grafiken
Servus! Mit Glassmorphism, GPU-beschleunigten Effekten und Live-Datenanbindung: Overlays, die wirklich krachen – im Browser, direkt im Stream.
- Latenzarm & OBS/NDI-freundlich
- Variablen- & Theme-System
- API/WebSocket-Ready
Ein Baukasten, der live abliefert
Performance, Flexibilität und Kontrolle – für Produktionen, die zählen.
Live-Updates in Millisekunden – Scores & Ticker ohne Reload.
Saubere Endpoints & Variablenbindung für deine Datenquellen.
Blur, Glows & Transitions – smooth und hardwarebeschleunigt.
Farben, Spacing, Typo – alles als Tokens steuerbar.
Scoreboards, Lower Thirds, Ticker – sofort einsatzbereit.
Deterministisches Layout, Captions-Safe, Edge-Cases bedacht.
Preise & Pläne
Starte gratis. Upgrade erst, wenn’s ernst wird.
Pro
- 10 Projekte
- 1080p60 Output
- REST & WebSocket API
- Theme‑ & Variablen‑System
- Priorisierter E‑Mail‑Support
Studio
- Unbegrenzte Projekte
- 4K Output (Beta)
- Team‑Seats (bis 3)
- Branding (Custom Fonts/Logos)
- Roadmap‑Wünsche priorisiert
Enterprise
- SSO, Rollen & Teams
- SLA (99,9%) & Premium‑Support
- On‑Prem / Private Cloud
- Individuelle Komponenten
- Schulungen & Abnahmen
So funktioniert’s
Vom Template zum Live-Overlay in vier Schritten.
Live-Update per WebSocket
Minimaler Code, maximale Wirkung.
// Beispiel: Score in Echtzeit aktualisieren
const ws = new WebSocket('wss://example.com/live');
ws.onmessage = (e) => {
const d = JSON.parse(e.data);
// IDs oder data-Attribute deiner Komponente
document.querySelector('[data-home-name]').textContent = d.home.name;
document.querySelector('[data-away-name]').textContent = d.away.name;
document.querySelector('[data-home-score]').textContent = d.home.score;
document.querySelector('[data-away-score]').textContent = d.away.score;
// Sets/Partials
const list = document.querySelector('[data-sets]');
list.innerHTML = d.sets.map(s => `${s.home}–${s.away}`).join('<br>');
};
Bereit für Grafiken, die knallen?
Starte jetzt – kostenlos testen, später upgraden. Keine Kreditkarte nötig.