The storyboard kit

The code that draws every storyboard on storyboards.sgit.ai, served so any page can use it: one script tag, pinned to a folder that never changes.

A storyboard here is data: a JSON file naming who is in each panel, their pose and mood, what they say, the evidence and its source, and a cast file saying what each character looks like. This site serves the code that draws them, as sketchy SVG panels with Rough.js, in the reader's browser. storyboards.sgit.ai is where the storyboards live; this is what draws them, there and anywhere else.

Two lines

<script src="https://api.storyboards.sgit.ai/v0/v0.1/v0.1.0/embed.js" defer></script>
<sg-storyboard src="https://storyboards.sgit.ai/pki/the-first-key/bundle.json"></sg-storyboard>

Above: panel 4 of pki.sgit.ai's The first key, drawn now, by this release, from a bundle. Click it to play.

One rule: the path is the version

The current release is v0.1.0, at https://api.storyboards.sgit.ai/v0/v0.1/v0.1.0/. Nothing at that path will ever change: a fix is a new folder, and this one stays. Every file in it is listed below with its SHA-256 and the integrity string a browser checks; every release has its own manifest. There is no latest path, on purpose: a page moves to a new release by changing one line. Versioning has the whole rule and the tools that enforce it.

FileBytesSHA-256Integrity
embed.js6,618849cd79b2ef346f9…sha384-MJYywdRM1gslaDV…
export.js6,977f49a784f692499b8…sha384-AZlBi+8U84fchjU…
fonts.css522aa1cef498940e9c9…sha384-ep4bdPYRUzquMIC…
fonts/OFL-Caveat.txt4,3851f9d81d094273d82…sha384-l911Hl/fkgplR26…
fonts/OFL-PatrickHand.txt4,376377f4f9c19e93522…sha384-dMIp2Y7W7PbACj2…
fonts/caveat-700-latin.woff251,02015f9638095ad5ec9…sha384-8ZKDDsekt9CcGNg…
fonts/patrick-hand-400-latin.woff223,944ac5bc9033b2572bf…sha384-eczLNWFwBaxVkuy…
formats.js11,4941e8f89a4dc4a6ec0…sha384-5+Nd7LBeUw3ULih…
props/security.js11,483bd58ffd4885eeb07…sha384-IkxAFhrp5pQhBSj…
storyboard.css15,8226d8c968a1c3ba7f3…sha384-NGJqtVi+93pE7lB…
storyboard.js68,1507465946c3a7fa739…sha384-3xZhCe5dUdBXMwV…
vendor/rough-4.6.6.LICENSE.txt1,068dca9a392272606ac…sha384-QZ87aOxxFPPgpOK…
vendor/rough-4.6.6.js27,9268589b8664aecfa76…sha384-XPr5sCJfqHMzoJ8…

Where to go next

Quick startEmbed a storyboard, or load the kit's files yourself with integrity strings
The formatThe storyboard and cast JSON, and the vocabulary the renderer knows
The JavaScriptStoryboardKit, StoryboardFormats, StoryboardExport and <sg-storyboard>
VersioningImmutable folders, manifests, cutting a release, starting a major
ReleasesEvery release, every file, every hash
The briefThe voice memo this was built from, in full