Entwine lets you play through interactive stories told via Markdown documents. It's little more than a viewer for Markdown documents, but one that lets you browse them in style, in an animated way designed for interactive storytelling.

• What's this Markdown stuff?
• More about Entwine

Markdown is a simple language for plain text that practically eliminates the need for mouse interaction and makes it super easy to format content. Using common symbols like # and -, you can create neatly formatted documents with ease.

• I still don't get it. Can you explain more?
• Great, tell me more about Entwine.

Maybe an example will help. To create a list item in Markdown, just type a - symbol and a space followed by your content.

For example, type this to create a list item:
- Discuss new features.

• Okay I get it, tell me more about Entwine.

Entwine is really just a viewer for Markdown documents, such as this one. This document is just a Markdown formatted file with a bunch of headers and anchor links pointing to those headers. A Markdown document reader lets you click links to go to those headers. That's really all Entwine does.

• Okay, why should I use it?

Any Markdown viewer can be used to progress through documents. So why use Entwine?

Entwine is designed for interactive storytelling. In general, it displays content on an as-needed basis, letting you progress through an elegant interface that can be configured for the story being told.

• Configured? How?

Entwine is fully themable/skinnable using CSS. There are also a bunch of pre-made themes to learn from or just use as needed. The project is built for GitHub Pages, where modifications are as easy as possible. Just create a fork of the project and you'll have a ready-made site to configure however you need.

• Themes? Where?
• What is GitHub?

GitHub is a developer focused code-hosting platform. GitHub Pages lets you host code for HTML websites at no cost. With that, you can host your own Entwine-driven website for free.

Entwine is part of a set of core projects (BreakDown framework) utilizing the same themes so it's able to use those existing themes. Check out the themes using the CSS Theme selector in the info panel. Or find out more from the link below.

• What link?

The following are some of the avaialable themes as examples of what is possible:

• Technology - Futuristic, tech theme with blue hues.
• Saint Billy - Low-down, grittiest, in-need-a-forgivenest Western theme.
• Old Glory - Patriotic throwback to American antiquity.
• Ghastly - Eerie off-shoot of Old Glory.
• Writing on the Wall - The writing's on the cavern walls.

ⓘ The code below designates a list of content sources the user will be able to select from in the app.

content 🅑-datalist

• Await

css 🅑-datalist

• Writing on the Wall - The writing's on the cavern walls.

🅑-theme-variables

vignette-blend 🅑-select

vignette 🅑-slider="0.25,0,1,0.025"

svg-filter 🅑-select

• *None

brightness 🅑-slider="1,0,3,0.05" contrast 🅑-slider="100%,0,300,1,%" grayscale 🅑-slider="0%,0,100,1,%" hue-rotate 🅑-slider="0deg,0,360,1,deg" invert 🅑-slider="0%,0,100,1,%" saturate 🅑-slider="100%,0,300,1,%" sepia 🅑-slider="0%,0,100,1,%" blur 🅑-slider="0px,0,20,1,px"

scale 🅑-slider="0,1,5,0.1" perspective 🅑-slider="1500px,0,2000,1,px" originx 🅑-slider="50%,0,100,1,%" originy 🅑-slider="50%,0,100,1,%" rotatex 🅑-slider="0deg,0,360,1,deg" rotatey 🅑-slider="0deg,0,360,1,deg" scalez 🅑-slider="0,1,5,0.1" rotatez 🅑-slider="0deg,0,360,1,deg" translatez 🅑-slider="0px,-500,500,1,px"

width 🅑-slider="960px,4,4000,1,px" height 🅑-slider="400px,4,2000,1,px" padding 🅑-slider="10px,0,500,1,px" inner-space 🅑-slider="100px,0,300,1,px" outer-space 🅑-slider="0px,0,300,1,px" offsetx 🅑-slider="0px,-4000,4000,1,px" offsety 🅑-slider="0px,-4000,4000,1,px"

🅑-toc

🅑-help 🅑-hide