React, Query, Markdown
As part of my book launch process for An Evening of Blue and Other Grim Yarns, I wanted to make an application that would take a page of text and turn it into a traversable interface where you can read it big at your own pace, without knowing how much text there actually is.
Features: Night mode, speak-as-you tap so you don't have to look at the screen to read the story, automatic text sizing, long paragraphs are broken into sentences, many ways to trigger story advancement.
How it works: The Markdown file is loaded in, then rendered to HTML through the react-markdown package. In order to access the output HTML after it's rendered (without rewriting the markdown package to give us the output we want), we select the DOM nodes with jQuery and apply contextual and visibility classes to them, and the rest is controlled by CSS, Fastclick and keyboard shortcuts.
Advance: Space, right arrow, tap, click
Step back: Delete, left arrow, tap, click
Below is a GIF of a tapping through a few frames of a story.