index.jade

.spritz
  .spritz-word
.settings
  .interaction
    a.pause#spritz_pause(href="#" title="Pause/Play")
    input.speed#spritz_wpm(type="number" value="300" step="50" min="50")
  textarea.demo-text.
    Spritz
    Check out version 2 of this demo - it's linked in the info.
    This is a jQuery implementation of Spritz technology. Paste some text below to try it out. Change the speed and test your comprehension abilities, and click the pause button or space bar if you get a bit overwhelmed!
    Reading is inherently  time consuming because your eyes have to move from word to word and line to line. Traditional reading also consumes huge amounts of physical space on a page or screen, which limits reading effectiveness on small displays. Scrolling, pinching, and resizing a reading area doesn’t fix the problem and only frustrates people. Now, with compact text streaming from Spritz, content can be streamed one word at a time, without forcing your eyes to spend time moving around the page. Spritz makes streaming your content easy and more comfortable, especially on small displays. Our “Redicle” technology enhances readability even more by using horizontal lines and hash marks to direct your eyes to the red letter in each word, so you can focus on the content that interests you. Best of all, Spritz’s patent-pending technology can integrate into photos, maps, videos, and websites to promote more effective communication.
  button.demo-text-change#spritz_change Refresh
a.light(href="#" title="Change Theme")

script.js

var wpm = $('#spritz_wpm').val();
var interval = 60000/wpm;
var paused = false;
var $space = $('.spritz-word');
var i = 1;

/* TEXT PARSING */
function words_set() {
  words = $('.demo-text').val().trim()
    .replace(/([-—])(\w)/g, '$1 $2')
    .replace(/[\r\n]/g, ' {linebreak} ')
    .replace(/\. /g, '. {period} ')
    .replace(/[ \t]{2,}/g, ' ')
    .split(' ');
  for (var j = 1; j < words.length; j++) {
    words[j] = words[j].replace(/{linebreak}|{period}/g, '   ');
  }
}
/* ON EACH WORD */
function word_show(i) {
  var word = words[i];
  var stop = Math.round((word.length+1)*0.4)-1;
  $space.html('<div>'+word.slice(0,stop)+'</div><div>'+word[stop]+'</div><div>'+word.slice(stop+1)+'</div>');
}
/* ITERATION FUNCTION */
function word_update() {
  spritz = setInterval(function() {
    word_show(i);
    i++;
    if (i == words.length) {
      setTimeout(function() {
        $space.html('');
        spritz_pause();
      }, interval);
      clearInterval(spritz);
    };
  }, interval);
}

/* PAUSING FUNCTIONS */
function spritz_pause() {
  clearInterval(spritz);
  paused = true;
  $('#spritz_pause').addClass('paused');
}
function spritz_play() {
  word_update();
  paused = false;
  $('#spritz_pause').removeClass('paused');
}
function spritz_flip() {
  if (paused) {
    spritz_play();
  } else {
    spritz_pause();
  }
}

/* INITIATE */
words_set();
word_show(0);
word_update();

/* CHANGE SPEED */
$('#spritz_wpm').on('input', function() {
  interval = 60000/$('#spritz_wpm').val();
  if (!paused) {
    clearInterval(spritz);
    word_update();
  }
});

/* REFRESH TEXT */
$('#spritz_change').on('click', function() {
  clearInterval(spritz);
  words_set();
  i = 0;
  spritz_play();
});

/* PAUSE BUTTON AND SPACE BAR */
$('#spritz_pause').on('click', function() {
  spritz_flip();
  return false;
});
$(document).on('keyup', function(e) {
  if (e.keyCode == 32) {
    spritz_flip();
  }
})

/* LIGHT/DARK THEME */
$('.light').on('click', function() {
  $('html').toggleClass('night');
  return false;
});

Spritz-Speed-Reading.markdown

Spritz Speed Reading

A rudimentary implementation of Spritz in jQuery.

VERSION 2

Change the words per minute, and pause/play with the button or the space bar. Also light/dark theme is cool.

A Pen by Charlotte Dann on CodePen.

License.

style.sass

@import "compass"
.spritz
  position: relative
  width: 30rem
  padding: 1rem 0 1.2rem
  border-top: 2px solid #000
  border-bottom: 2px solid #000
  margin: 10rem auto
  &:before, &:after
    content: ''
    position: absolute
    left: 40%
    height: 0.8rem
    width: 2px
    margin-left: -1px
    background-color: #000
  .night &
    border-color: #555
    &:before, &:after
      background-color: #555
  &:before
    top: 0
  &:after
    bottom: 0
.spritz-word
  font-size: 2.4rem
  line-height: 3.2rem
  height: 3.2rem
  font-weight: 600
  div
    display: table-cell
    &:first-child
      width: 40%
      text-align: right
    &:nth-child(2)
      color: darken(red,5)
      .night &
        color: lighten(red,15)
    &:last-child
      width: 60%
      text-align: left
        
.settings
  margin: 0 auto
  max-width: 30rem
  input, textarea, button
    box-sizing: border-box
    border: 0
    +background(linear-gradient(top, #eee, #fafafa))
    color: #000
    .night &
      +background(linear-gradient(top, #222, #1a1a1a))
      color: #aaa
    padding: 1rem 1.5rem
    &:focus
      outline: none
  .interaction
    margin: 2rem 0
  .pause
    font-family: 'IconicFill', sans-serif
    display: block
    float: left
    height: 4rem
    width: 4rem
    line-height: 3.6rem
    font-size: 4rem
    text-decoration: none
    color: #aaa
    transition: color 150ms linear
    &:hover
      color: #777
    &:before
      content: '\e049'
    &.paused:before
      content: '\e047'
    .night &
      color: #555
      &:hover
        color: #888
  .speed
    position: relative
    display: block
    float: right
    height: 4rem
    width: 18rem
    font-weight: 600
    &::-webkit-inner-spin-button
      -webkit-appearance: none
      opacity: 1!important
      cursor: pointer
      display: block
      position: relative
      height: 100%
      width: 4rem
      font-size: 1rem
    &::-webkit-inner-spin-button:before, &::-webkit-inner-spin-button:after
      position: absolute
      display: inline-block
      padding: 0 1rem
      height: 2rem
      width: 100%
      text-align: center
      line-height: 2rem
      font-weight: 400
      text-transform: uppercase
      right: 0
    &::-webkit-inner-spin-button:before
      content: 'faster'
      +background(linear-gradient(bottom, #eee, #fafafa))
      .night &
        +background(linear-gradient(bottom, #222, #1a1a1a))
    &::-webkit-inner-spin-button:after
      top: 2rem
      content: 'slower'
  .demo-text-change
    margin: 1rem auto
    display: block
    cursor: pointer
    &:active
      padding: 1.1rem 1.5rem 0.9rem
      +background(linear-gradient(bottom, #eee, #fafafa))
      .night &
        +background(linear-gradient(bottom, #222, #1a1a1a))
  .demo-text
    width: 100%
    height: 5em
    margin: 5rem 0 0
    &::-webkit-scrollbar
      width: 0.8rem
    &::-webkit-scrollbar-thumb
      background: #ccc
      .night &
        background: #555
    .night &::-webkit-resizer
      background: #222
        
.light
  position: absolute
  top: 2rem
  left: 3rem
  font-size: 3rem
  font-family: 'IconicFill', sans-serif
  text-decoration: none
  &:after
    content: '\263e'
    color: #5E606B
  .night &:after
    content: '\2600'
    color: #A6A392
      
html
  font-size: 10px
body
  background: #ddd
  color: #000
  transition: background 0.1s linear
  .night &
    background: #111
    color: #bbb
body, input, textarea, button
  font-size: 1.4rem
  font-family: Open Sans, sans-serif