Il player open source per le graphic novel interattive

Un solo player riproduce ogni opera PanelWave: nell’anteprima dello studio, sul reader pubblico e sul tuo sito. Vista pagina e vista vignetta, video, suono, cambio di lingua al volo, scelte e accessibilità. Con licenza MIT.

Vedi su GitHub

Fig. R — Leggere un’opera PanelWaveNessuna app: si apre nel browser. Vista pagina o vista vignetta, al tuo ritmo, nella tua lingua, con o senza audio.

SpecificheProgettato per opere reali

licenza: MIT
budget gzip (CI): ≤180 KB
versioni di Angular: 20–22
ultima su npm: 1.2

Tre viste

Vista vignetta con transizioni, vista pagina per ogni formato di uscita e vista tela con panoramica e zoom della camera.

Navigazione nel grafo

Condizioni JSON Logic, priorità dei collegamenti, cronologia avanti/indietro che ripristina lo stato e un pulsante «Choices».

Variabili e varianti

Cinque ambiti, valori di sola lettura forniti dal tuo sito, varianti condizionali delle vignette: vince la prima che corrisponde.

Vignette video

Modalità di riproduzione e di avvio, un solo video attivo alla volta, riproduzione in sequenza nella vista pagina.

Motore audio

Un mixer WebAudio con bus per atmosfera, musica, voce fuori campo ed effetti sonori; chi legge può attivare o disattivare audio, effetti e voce.

Lingue al volo

Cambio di lingua senza ricaricare la pagina, catene di fallback, asset per ogni lingua. Interfaccia del player in inglese e tedesco.

Lettering da fumetto

Lo stesso motore SVG dei balloon usato nello studio: dieci tipi di balloon, testo vero, riadattato a ogni lingua.

Hook per il paywall

Regole per opera, capitolo, vignetta ed extra, anteprime gratuite, verifiche dell’età. Il player emette eventi, al pagamento pensa il tuo sito.

Accessibile

Controllo da tastiera, etichette ARIA, live region, gestione del focus, movimento ridotto; controlli axe automatici in CI.

Hook di misurazione

Misurazione del pubblico che rispetta il consenso, limitata agli eventi ammessi: vignette viste, scelte, clic sugli hotspot, letture completate.

Livelli plugin

Livelli plugin in iframe isolati, con un bus di messaggi che verifica l’origine.

Leggero

Un limite di 180 KB gzip per il bundle, imposto dalla CI, immagini responsive e precaricamento di ciò che segue.

EmbedDue strade

Integralo in pochi minuti

In un’app Angular — o su qualsiasi sito web

Angular: la libreria npm

Installa il pacchetto e inserisci il componente shell.

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>

Qualsiasi sito: l’iframe del reader

Pubblica dallo studio e incolla il codice di embed che genera.

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>

Per ora la libreria funziona solo con Angular: non c’è ancora un tag script pronto all’uso né un web component. Alcune funzioni del reader sono già attive su read.panelwave.org e arriveranno su npm con la prossima versione del player.

Fig. 7Ospita in proprio un’intera opera

Fig. 7 — Formato aperto e playerFormato CC BY 4.0, player MIT. Pubblica con noi — oppure scarica l’archivio dell’opera e ospitala in proprio.

Un archivio dell’opera funziona su qualsiasi hosting statico

In un archivio esportato, gli URL degli asset sono relativi al manifest: decomprimilo accanto al player e l’opera parte. Nessuna logica lato server, nessun lock-in.

MITPlayer · SDKCC BY 4.0Formato

Dai vita alle graphic novel sul tuo sito.

Open source, con licenza MIT: è lo stesso player che usa PanelWave.

Vedi su GitHub Leggi la specifica del formato