Der Open-Source-Player für interaktive Graphic Novels

Ein einziger Player zeigt jedes PanelWave-Werk – in der Studio-Vorschau, im öffentlichen Reader und auf deiner eigenen Website. Seiten- und Panelansicht, Video, Sound, Sprachen live, Entscheidungen und Barrierefreiheit – alles unter MIT-Lizenz.

Auf GitHub ansehen

Abb. R – Ein PanelWave-Werk lesenOhne App, direkt im Browser. Seiten- oder Panelansicht, dein Tempo, deine Sprache, Ton an oder aus.

DatenGebaut für echte Werke

Lizenz: MIT
gzip-Budget (CI): ≤180 KB
Angular-Versionen: 20–22
aktuell auf npm: 1.2

Drei Ansichten

Panelansicht mit Übergängen, Seitenansicht pro Ausgabeformat und Leinwandansicht mit Kameraschwenk und Zoom.

Graph-Navigation

JSON-Logic-Bedingungen, Prioritäten für Verbindungen, ein Vor-/Zurück-Verlauf, der den Zustand wiederherstellt, und ein Button für Entscheidungen.

Variablen & Varianten

Fünf Geltungsbereiche, schreibgeschützte Werte, die deine Website vorgibt, bedingte Panel-Varianten – der erste Treffer gewinnt.

Videopanels

Abspiel- und Startmodi, immer nur ein aktives Video, Wiedergabe nacheinander in der Seitenansicht.

Audio-Engine

Ein WebAudio-Mixer mit Bussen für Atmo, Musik, Voice-over und SFX; Lesende schalten Audio, SFX und Sprache ein und aus.

Sprachen live

Sprache ohne Neuladen wechseln, Fallback-Ketten, Assets je Sprache. Player-Oberfläche auf Englisch und Deutsch.

Comic-Lettering

Dieselbe SVG-Sprechblasen-Engine wie im Studio – zehn Sprechblasentypen, echter Text, für jede Sprache neu eingepasst.

Paywall-Hooks

Regeln für Werk, Kapitel, Panel und Extras, Gratis-Vorschauen, Altersfreigaben – der Player sendet Events, deine Website wickelt den Kauf ab.

Barrierefrei

Tastatursteuerung, ARIA-Labels, Live-Regionen, Fokusverwaltung, reduzierte Bewegung; automatisierte axe-Prüfungen in der CI.

Tracking-Hooks

Event-Tracking nur mit Einwilligung, per Whitelist – Panelaufrufe, Entscheidungen, Hotspot-Klicks, Abschluss.

Plugin-Ebenen

Plugin-Ebenen in Sandbox-iframes mit einem Nachrichtenbus, der den Ursprung prüft.

Schlank

Ein Bundle-Budget von 180 KB (gzip), von der CI erzwungen; responsive Bilder und vorausschauendes Vorladen.

EinbettenZwei Wege zum Einbinden

In Minuten eingebettet

In einer Angular-App – oder auf jeder Website

Angular: die npm-Bibliothek

Paket installieren, Shell-Komponente einsetzen.

npm

npm install @panelwave/player @ngx-translate/core

<pw-player-shell
  [manifestUrl]="'assets/my-story/panelwave.json'"
  [showToolbar]="true"
  (panelChange)="onPanel($event)">
</pw-player-shell>

Jede Website: per Reader-iframe

Im Studio veröffentlichen, den erzeugten Embed-Code einfügen.

html

<iframe
  src="https://read.panelwave.org/your-team/your-work?embed=1"
  width="800" height="600" allow="fullscreen"
  style="border:0;max-width:100%" loading="lazy"
  title="Your work title"></iframe>

Die Bibliothek gibt es bisher nur für Angular – ein fertiges Script-Tag oder eine Web Component fehlt noch. Einige Reader-Funktionen laufen schon auf read.panelwave.org und kommen mit dem nächsten Player-Release auf npm.

Abb. 7Ein ganzes Werk selbst hosten

Abb. 7 – Offenes Format & PlayerDas Format steht unter CC BY 4.0, der Player unter MIT. Veröffentliche bei uns – oder lade das Werkarchiv herunter und hoste es selbst.

Ein Werkarchiv läuft auf jedem statischen Host

Asset-URLs in einem exportierten Archiv sind relativ zum Manifest – entpack es neben dem Player, und es läuft. Keine Serverlogik, keine Anbieterbindung.

MITPlayer · SDKCC BY 4.0Format

Erweck Graphic Novels auf deiner Website zum Leben.

Open Source, MIT-lizenziert – und derselbe Player, den PanelWave selbst einsetzt.

Auf GitHub ansehen Zur Formatspezifikation