Quick start
Draw a storyboard on any page, with the embed or with the kit's files loaded by hand.
The embed
<script src="https://api.storyboards.sgit.ai/v0/v0.1/v0.1.0/embed.js" defer></script>
<sg-storyboard src="https://storyboards.sgit.ai/gen-z-developers/the-opening/bundle.json" view="deck"></sg-storyboard>embed.js loads the rest of release v0.1.0 from beside itself, once per page: fonts.css, storyboard.css, vendor/rough-4.6.6.js, any prop pack the bundle names, then storyboard.js. Attributes:
| Attribute | Means | Default |
|---|---|---|
src | a bundle: { "storyboard": ..., "cast": ..., "packs": [...] } | |
storyboard, cast | two URLs instead of a bundle | |
view | deck, grid, script, or panel (one still panel) | deck |
panel | with view="panel", which panel, from 1 | 1 |
packs | extra prop packs, comma separated: today security | the bundle's |
The JSON can be served from any host that sends access-control-allow-origin (GitHub Pages does, for every file).
The files by hand, with integrity
For a page that wants the browser to refuse any byte that is not the release's, load the files with the integrity strings from the manifest. This is what storyboards.sgit.ai does on every page:
<link rel="stylesheet" href="https://api.storyboards.sgit.ai/v0/v0.1/v0.1.0/fonts.css" integrity="sha384-ep4bdPYRUzquMICQMhuOkSZ/CB1FnMh6qnGWS1F74VepoLOlw9JGK+Zg+E6/t9dD" crossorigin="anonymous">
<link rel="stylesheet" href="https://api.storyboards.sgit.ai/v0/v0.1/v0.1.0/storyboard.css" integrity="sha384-NGJqtVi+93pE7lBuwFU0RQWhqnQVLR33Wp8AYH1iAeyC2A7h2ijgU4bEKF5HIKIf" crossorigin="anonymous">
<script src="https://api.storyboards.sgit.ai/v0/v0.1/v0.1.0/vendor/rough-4.6.6.js" integrity="sha384-XPr5sCJfqHMzoJ8Cn1UYdXXD+XvRi0yoZm3W0yVJ24QP0ps8SYUskiXqnl4yqWlc" crossorigin="anonymous"></script>
<script src="https://api.storyboards.sgit.ai/v0/v0.1/v0.1.0/props/security.js" integrity="sha384-IkxAFhrp5pQhBSjFCLMEA+1iqFHJ6xPRLeO2n9g478h7Z8hW9cUyvza3PuOtmsOx" crossorigin="anonymous"></script>
<script src="https://api.storyboards.sgit.ai/v0/v0.1/v0.1.0/storyboard.js" integrity="sha384-3xZhCe5dUdBXMwV57gyscmlqdIjzz9L6huUkcuiEyC0V3jfrlQEdyEhvvF4kCeOa" crossorigin="anonymous"></script>
<script src="https://api.storyboards.sgit.ai/v0/v0.1/v0.1.0/export.js" integrity="sha384-AZlBi+8U84fchjU5NkLWax6WlMqeEdfDT8jW+Rkjr7MYfrYxE9qfvToj6ekYas4M" crossorigin="anonymous"></script>Then the page's own markup: a .sb-viewer holding the toolbar, .sb-deck, .sb-grid, .sb-script and a <script type="application/json" class="sb-data"> with { "storyboard", "cast" }. The kit wires every such element on the page when it loads (StoryboardKit.wire(root) does it again for markup added later). The simplest copy to start from is any storyboard page on storyboards.sgit.ai: view its source.
Draw one panel yourself
const svg = document.querySelector('svg');
StoryboardKit.drawScene(svg, storyboard.scenes[0], cast, { seed: 11 });Seeds make the wobble repeatable: the same panel with the same seed is the same picture on every load. The deck uses 11 + panel index, and so do the exports.