loomse

Interactive storytelling for the modern web

Usage no npm install needed!

<script type="module">
  import loomse from 'https://cdn.skypack.dev/loomse';
</script>

README

Loom Story Engine

Interactive storytelling for the modern web - create your script in Loom, tell multiple tales

What is LoomSE?

LoomSE is a client side HTML5 video and event manager. Events can be scheduled to fire during video playback, which your application can subscribe to and use. By interacting with the API you can then direct how the video should play, or even which video should play next.

Demo

loomse.org

Installation

This repository includes a minified version of LoomSE /dist/loomse.min.js

via npm

npm i loomse

Usage

See our Getting Started Guide for a more detailed introduction

Importing

ES6 module via default export

import LoomSE from 'loomse';

Syntax

const loomSE = new LoomSE(element: HTMLElement[, options: object]);
element (required)

A valid DOM element to which LoomSE will unpack itself

options (optional)

An object. Valid keys:

  • width: number (default: 100%)

    width of the resulting video element

  • height: number (default: 100%)

    height of the resulting video element

Example usage

HTML
<div id="loomSE"></div>
JavaScript
const parent = document.querySelector('#loomSE');  
const loomSE = new LoomSE(parent, {  
  width: 800,  
  height: 600  
});

API

Visit the API reference

The Story Script

Use the provided template script

Or look at the example script

Or Learn how to build Your Story

Terminology

Script

Like the script in a play, a script is the blueprint for a story. Contains the story and metadata.

Story

A collection of scenes

Scene

Part of a story

Pronounciation

{ loom-see }