'Stranger Things' - the alphabet wall

index.pug

// 'Stranger Things' alphabet wall -
// Type or click to make the bulbs light up
-var letters = {"row1":['a','b','c','d','e','f','g','h'],"row2":['i','j','k','l','m','n','o','p','q'],"row3":['r','s','t','u','v','w','x','y','z']}
main.lights
  each row, i in letters
    ul.row(class=i)
      each letter in row
        li.item(id='item--' + letter)
          span.bulb
          span.letter= letter
div.foreground
  each row, i in letters
    ul.row(class=i)
      each letter in row
        li.item
          span.bulb
div.dado
div.panelling
div.lamp

script.js

// Using jQuery because I'm lazy
var lights = {
  
  // Set up event listeners for keyboard keys
  init: function(){
    // Every time a key is pressed...
    $(document).keypress(function(e){
      // ... get its value
      // and find the matching DOM element, if any...
      var ch = String.fromCharCode(e.charCode),
          el = $('#item--'+ch);
      // ... then send it to the 'blink' function
      lights.blink(el);
      // If user hits enter, flash everything randomly
      // Kinda crappy effect, I know
      if (e.which === 13) {
        lights.random();
      }
    });
    
    // Lights also respond to being clicked
    $('.item').on('click',function(e){
      lights.blink($(this));
    });
  },
  
  // Turn a single bulb on and off
  blink: function(el){
    var bulb = el.find('.bulb');
    bulb.addClass('lit');
    setTimeout(function(){
      bulb.removeClass('lit');
    },600);
  },
  
  // Flash lights randomly
  random: function(){
    (function(count){
      if (count < 36) {
        var caller = arguments.callee;
        window.setTimeout(function() {
          var rand = Math.floor(Math.random() * 26) + 1;
          var el = $('.item').eq(rand);
          var el2 = $('.item').eq(rand*2);
          lights.blink(el);
          lights.blink(el2);
          $('html').toggleClass('flicker');
          caller(count + 1);
        }, Math.floor(Math.random() * 100));
      }
    })(0)
  }
}

$(function(){
  lights.init();
})

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

stranger-things-the-alphabet-wall.markdown

'Stranger Things' - the alphabet wall

A fun recreation of the alphabet wall from Stranger Things. Click or type to light up the bulbs and send Joyce a message!

---

Created with basic HTML, CSS, JS and SVG, except for the floral wallpaper image (taken from subtlepatterns.com). Unashamedly lazy/messy code. Things to improve (which, let's be honest, I am never going to do):

• Progressive enhancement for all the cutting-edge CSS
• requestAnimationFrame (haven't got my head around that yet)
• Remove jQuery
• Probably just redo the whole thing in SVG

NB. Only works in modern browsers. Sorry!

A Pen by jordan rhea on CodePen.

License.

style.scss

// ////////////////////
// Contents
// 1. Lights & letters
// 2. Foreground & hint text
// 3. Background

// ////////////////////
// 1. Lights & letters

// <main> element
// Contains all bulbs & letters
.lights {
  left: 0;
  max-height: 90%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
}

// <ul> element
// Alphabet is split into three of these
.row {
  background-repeat: repeat-x;
  list-style: none;
  margin: 2em -3em;
  padding: 0;
}

.row1 {
  background-image: url(http://svgur.com/i/Ar.svg);
  transform: skewX(2deg) rotate(-4deg);
}

.row2 {
  background-image: url(http://svgur.com/i/Ag.svg);
  transform: skewX(3deg) rotate(-1deg)''
}

.row3 {
  background-image: url(http://svgur.com/i/B2.svg);
  transform: skewX(-4deg) rotate(-4deg);
}

// <li>
// Each one contains a bulb and a letter
.item {
  display: inline-block;
  margin: 1em .5em 0;
  position: relative;
  text-align: center;
  text-transform: uppercase;
}

// <span>
// A painted letter
.letter {
  cursor: pointer;
  display: block;
  font-size: 4em;
}

// <span>
// A bulb
.bulb {
  background-color: currentColor;
  border-radius: 50%;
  display: block;
  filter: drop-shadow(.3em .3em rgba(#000,0.1));
  height: 1em;
  margin: -.2em auto -1em;
  opacity: .7;
  position: relative;
  width: .4em;
  z-index: 9;
  
  .flicker & {
    background-color: #556;
  }
  
  &.lit {
    background: radial-gradient(#fff, #aaa), currentColor;
    background-blend-mode: screen;
    box-shadow: 0 .5em .5em currentColor,
                0 .5em 1em currentColor,
                0 .5em 1.5em currentColor,
                0 .5em 3em 2em currentColor;
    opacity: 1;
    transition: all .1s ease;
  }
  
  // A bulb's "socket", ie the black bit
  &:before {
    background-color: #111;
    background: linear-gradient(to right, #000, #222, #000);
    content:'';
    display: block;
    height: .4em;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: -.3em;
    width: .3em;
  }
  
  // Small reflection on the bulb
  &:after {
    background-color: #fff;
    content:'';
    display: block;
    height: .3em;
    left: .1em;
    position: relative;
    top: .2em;
    width: .05em;
  }
}

// Give each bulb a slight random rotation,
// and each letter a slight random change of scale
@for $i from 1 through 26 {
  .item:nth-child(#{$i}) {
    .bulb {
      transform: rotate((random(60))-30 * 1deg);
    }
    .letter {
      transform: scale(0.9 + (random(4)/10));
    }
  }
}

// Colours and positioning for each bulb
$white:#ffe;
$purple:#64f;
$pink:#d19;
$red:#e02;
$mint:#6fd;
$blue:#0be;
$yellow:#fd7;
#item--a {.bulb {color:$white}}
#item--b {.bulb {color:$purple}}
#item--c {.bulb {color:$pink}}
#item--d {.bulb {color:$mint}}
#item--e {.bulb{color:$blue}}
#item--f {.bulb{color:$yellow}}
#item--g {.bulb{color:$pink}}
#item--h {.bulb{color:$blue}}
#item--i {.bulb{color:$mint}right:1.7em}
#item--j {.bulb{color:$red}}
#item--k {.bulb{color:$blue}}
#item--l {.bulb{color:$mint}}
#item--m {.bulb{color:$yellow}}
#item--n {.bulb{color:$pink}}
#item--o {.bulb{color:$red}}
#item--p {.bulb{color:$mint}}
#item--q {.bulb{color:$pink}left:2em}
#item--r {.bulb{color:$mint}}
#item--s {.bulb{color:$white}}
#item--t {.bulb{color:$yellow}right:1em}
#item--u {.bulb{color:$purple}}
#item--v {.bulb{color:$red}}
#item--w {.bulb{color:$blue}}
#item--x {.bulb{color:$yellow}}
#item--y {.bulb{color:$red}}
#item--z {.bulb{color:$pink}left:1em}

// ////////////////////
// 2. Foreground

// Blurred non-interactive lights, for decoration
.foreground {
  color: $white;
  filter: blur(1px);
  position: relative;
  top: -5vw;
  transform: scale(3);
  z-index: 999;
  
  .row {
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
  }
  
  .row1 {
    transform: rotate(-10deg);
  }
  
  .row2 {
    top: .5em;
    transform: rotate(4deg)
  }
  
  .row3 {
    display: none;
  }
  
  .bulb {
    background-color: #aa9;
    margin: -.4em 1em 0;
    opacity: 1;
  }
}

.hint {
  animation: fade 10s ease 1;
  bottom: 1em;
  color: #fff;
  font-family: Georgia, serif;
  left: 0;
  margin: auto;
  opacity: 0;
  right: 0;
  position: absolute;
  z-index: 9;
}

@keyframes fade {
  10% {opacity: 1;}
  100% {opacity: 0;}
}

// ////////////////////
// 3. Background

// Dado
// She sang "Life For Rent"
.dado {
  background: linear-gradient(#3C2713, #513F29 15%, #b96 25%, #44321C 35%, #5C4531 45%, #261205 60%, #4E3B26 90%, #261205);
  bottom: 6%;
  position: absolute;
  top: 90%;
  transform: rotate(-.1deg);
  width: 100%;
}

// Wood panelling
// So very 70's
.panelling {
  background: linear-gradient(left, #331F06, #4A3517 1%, #452F15 2%, #4D361F 3%, #4F391E 65%, #4A3517 99%, #331F06) center;
  background-size: 97px;
  bottom: 0;
  position: absolute;
  top: 94%;
  width: 100%;
}

// Originally this was going to be animated but now it's just a subtle colour gradient
.lamp {
  background: linear-gradient(300deg, orange 33%, teal);
  opacity: .1;
  pointer-events: none;
  position: absolute;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

// Vignette
.vignette {
  animation: swell 10s ease-in-out infinite alternate;
  background: url(https://dl.dropboxusercontent.com/u/5942079/noise.png), radial-gradient(rgba(#100,0), rgba(#100,1));
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  .flicker & {
    background: #100;
  }
}

@keyframes swell {
  0% {transform: scale(1)}
  100% {transform: scale(1.1)}
}

html {
  background-blend-mode: multiply;
  background-color: #ba6;
  // Image from https://subtlepatterns.com/gray-floral
  background-image: url(https://dl.dropboxusercontent.com/s/jyzol1bxl6jrnhi/greyfloral.png);
  font-family: 'Finger Paint', cursive;
  font-size: 20px;
  height: 100%;
  overflow: hidden;
  text-align: center;
  
  &.flicker {
    background-color: rgba(#100,.8);
  }
  
  @media only screen and (max-width: 1000px) {
    font-size: 2vw;
  }
}