magic.css

body {
    height: 100%;
    overflow: hidden;
}

canvas{
  pointer-events: none;
  background-color:#4889f2;
  transition-duration: 2s;
  overflow: hidden;
}

canvas.dark {
  background-color: #172f56;
}

canvas.light {
  background-color: #f8f9cf;
}

canvas.light {
  background-color: #f8f9cf;
}

.feather {
    position: absolute;
    top: 100%;
    width: 150px;
    transition-duration: 2s;
}

.feather--floating {
    position: absolute;
    top: 50px;
    animation:spin 4s linear infinite;
}

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.marker {
    width: 50px;
    height: 50px;
    position: absolute;
    opacity: 0;
    transition-duration: .5s;
}

.marker.active {
    opacity: .6;
}

.marker.right {
    top: 50%;
    right: 50px;
}

.marker.left {
    top: 50%;
    left: 50px;
}

.marker.up {
    top: 50px;
    left: 50%;
}

.marker.down {
    bottom: 50px;
    left: 50%;
}