A Taurid Meteorite New Year

index.pug

div.starfield
  div.static
  div.moving-1
  div.moving-2
  div.moving-3

- 
  var words = [
    { pos: 23.755, text: 'Space:' },
    { pos: 25.267, text: 'the final' },
    { pos: 26.112, text: 'frontier.' },
    { pos: 28.433, text: 'These are' },
    { pos: 29.024, text: 'the voyages of' },
    { pos: 29.887, text: 'the starship' },
    { pos: 30.549, text: 'Enterprise.' },
    { pos: 32.386, text: 'Its continuing mission:'},
    { pos: 33.997, text: 'to explore' },
    { pos: 34.690, text: 'strange new' },
    { pos: 35.547, text: 'worlds,' },
    { pos: 37.628, text: 'to seek out' },
    { pos: 38.228, text: 'new life' },
    { pos: 38.954, text: 'and new civilizations,' },
    { pos: 42.001, text: 'to boldly go' },
    { pos: 43.251, text: 'where no one' },
    { pos: 44.072, text: 'has gone before.' }
  ]
each word, index in words
  div.word(style={top: (word.pos * 4 - 92) + 'vh', 'animation-delay': (word.pos - 23) + 's'})= word.text

style.scss

html, body {
  margin: 0;
}
body {
  background: #000;
  color: #fff;
  font-family: sans-serif;
  overflow: hidden;
}

@function random-stars() {
  $result: '';
  @for $i from 1 through 100 {
    $result: $result + 
      (random(200) - 100) + 'vw ' + 
      (random(200) - 100) + 'vh ' +
      '1px 0.75px ' +
      rgba(
        (random(15) + 240),
        (random(15) + 240),
        (random(15) + 240),
        (random() + 0.5)
      );
    @if $i < 100 {
      $result: $result + ', ';
    }
  }
  
  @return unquote($result);
}

@function random-range($min, $max, $unit: '') {
  @return unquote($max - random($max - $min) + $unit);
}

$randomX: random-range(-40, 40, 'vw');
$randomY: random-range(-40, 40, 'vh');

@mixin star-field {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 100%;
  transform-origin: $randomX $randomY;
  box-shadow: random-stars();
}

div.starfield {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  
  .static {
    @include star-field;
    width: 1px;
    height: 1px;
  }
  .moving-1 {
    @include star-field;
    animation: star-movement 9s cubic-bezier(0.55, 0, 1, 0.45) infinite, direction-movement 30s ease-in-out alternate infinite;
  }
  .moving-2 {
    @include star-field;
    animation: star-movement 9s -3s cubic-bezier(0.55, 0, 1, 0.45) infinite, direction-movement 30s ease-in-out alternate infinite;
  }
  .moving-3 {
    @include star-field;
    animation: star-movement 9s -6s cubic-bezier(0.55, 0, 1, 0.45) infinite, direction-movement 30s ease-in-out alternate infinite;
  }
}

@keyframes star-movement {
  0% {
    transform: scale(0.5) translateZ(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    transform: scale(2) translateZ(0);
    opacity: 0;
  }
}

@keyframes direction-movement {
  from {
    transform-origin: random-range(-40, 0, 'vw') random-range(-40, 0, 'vh');
  }
  to {
    transform-origin: random-range(0, 40, 'vw') random-range(0, 40, 'vh');
  }
}

div.word {
  position: absolute;
  right: 1vw;
  text-align: right;
  font-size: 2vh;
  animation: word-appear 60s infinite;
  opacity: 0;
  transform: translate3d(calc(1vw + 100%),0,0);
}

@keyframes word-appear {
  0% { opacity: 0; transform: translate3d(calc(1vw + 100%),0,0); }
  2% { opacity: 1; transform: translate3d(0,0,0); }
  80% { opacity: 0; transform: translate3d(0,0,0); }
}

the-final-frontier.markdown

Original␣ - The Final Frontier

... these are the voyages of the starship Enterprise ...

First I wanted to recreate the space from the Star Trek title and voyage sequences. Then I went 100% and added the phrase with the original timing and accordingly spaced.

A Pen by sebu10n on CodePen.

License.

" I enjoy reading code like it's poetry. 
Looking at it, like its some morsel form of art 
when it's broken and could be fixed. 
Its even better when code helps others.”

++++++++++++++_

@function random-stars() {
  $result: '';
  @for $i from 1 through 100 {
    $result: $result + 
      (random(200) - 100) + 'vw ' + 
      (random(200) - 100) + 'vh ' +
      '1px 0.75px ' +
      rgba(
        (random(15) + 240),
        (random(15) + 240),
        (random(15) + 240),
        (random() + 0.5)
      );
    @if $i < 100 {
      $result: $result + ', ';