#text-effect-wrapper
  .slide
    p Associate Producer
    h1 Marcy G. Kaplan
  .slide
    p Associate Producer
    h1 Steven Heth
  .slide
    p Associate Producer
    h1 Bruce J. Nachbar
  .slide
    p Executive Story Editor
    h1 Lawrence Kaplow
  .slide
    p Story Editor
    h1 Joel Thompson
  .slide
    p Co-Starring
    p.left Timothy McNeil
    p.right Patient #2
    p.left Deirdre M. Smith
    p.right Carol Moffatt
  .slide
    p Theme by
    h1 Jon Ehrlich
    br
    p Music by
    h1 John Erlich
    h1 Jason Derlatka
  .slide
    p Casting by
    h1 Amy Lippens, c.s.a
  .slide
    p Costume Designer
    h1 Cathy Crandall

slide-time = 5s
slide-number = 9

letter-posibilities = 20

random(min,max)
  return floor(math(0, 'random')*(max - min + 1) + min)

body
  margin 0
  font-family 'Open-Sans', sans-serif
  letter-spacing 4px
  background #111214
  color #eee
  text-align center
  font-variant small-caps
  *
    font-weight 100

#text-effect-wrapper
  display block

.slide
  max-width 100%
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -50%)
  opacity 0
  white-space nowrap
  animation fadein (slide-time * slide-number) infinite
  for i in (1..slide-number)
    &:nth-child({i})
      animation-delay slide-time * (i - 1)
      .text-effect
        animation-delay slide-time * (i - 1) !important
        for n in (1..letter-posibilities)
          &:nth-child({letter-posibilities}n + {n})
            animation (slide- + i +- + n) (slide-time * slide-number) ease infinite

  p
    &.left
      text-align left
      float left
      font-size 1.5em
    &.right
      text-align right
      float right
      font-size 1.5em
      display block

h1, h2, h3
  letter-spacing 16px
  &, /p
    margin 2px 0

span.text-effect
  margin-left -1px
  white-space pre
  display inline-block

for i in (1..slide-number)
  for n in (1..letter-posibilities)
    @keyframes slide-{i}-{n}
      if odd(i)
        {50% / slide-number}
          transform translate(0%, random(-5%, 35%))
        {80% / slide-number}, 100%
          transform translate(0%, -20px)
      else
        {50% / slide-number}
          transform translate(0%, random(-35%, 5%))
        {80% / slide-number}, 100%
          transform translate(0%, 20px)
      0%
        transform translate(0%, 0%)

@keyframes fadein
  {40% / slide-number}, {50% / slide-number}
    opacity 1
  0%, {80% / slide-number}, 100%
    opacity 0

document.getElementById('text-effect-wrapper').innerHTML = document.getElementById('text-effect-wrapper').innerHTML.replace (/(<.*?>)|(.)/g, function (m0, tag, ch) { return tag || ('<span class="text-effect">' + ch + '</span>'); });