- const cells = 120;
.grid
  - for (var cell = 1; cell < cells; cell++)
    div(class='cell cell-color-' + ((cell % 5) + 1) + ' cell-number-' + cell)

.grid {
  display: grid;
  grid-template-columns: repeat(200, 10px);
  grid-template-rows: repeat(6, 10px);
}

.cell {
  --speed: 0.2s;
  aspect-ratio: 69 / 69;
  animation: appear var(--speed) linear forwards;
  transform: translateY(12px);
  opacity: 0;
}
.cell-color-1 {
  background: var(--cell-color-1, #f8ca08);
}
.cell-color-2 {
  background: var(--cell-color-2, #d3b427);
}
.cell-color-3 {
  background: #f26a23;
}
.cell-color-4 {
  background: #6c9aaf;
}
.cell-color-5 {
  background: #a5a7a9;
}

@for $i from 1 through 120 {
  .cell-number-#{$i} {
    grid-column-start: random(200);
    grid-row-start: random(6);

    @if random(100) > 88 {
      grid-column-end: span 2;
    }
    @if random(100) > 96 {
      grid-column-end: span 3;
    }

    animation-delay: (random(10) / 40) + s;
  }
}

body {
  background: linear-gradient(
    to bottom,
    #0f171f,
    #0f171f 50%,
    #35637f 50%,
    #35637f
  );
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  margin: 0;
}

@keyframes appear {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

import Knobs from "https://cdn.skypack.dev/@yaireo/knobs";

var settings = {
  knobsToggle: true,
  visible: 0,
  CSSVarTarget: document.querySelector(".grid"),

  knobs: [
    {
      cssVar: ["cell-color-1"],
      label: "Cell Color 1",
      type: "color",
      value: "#f8ca08"
    },
    {
      cssVar: ["cell-color-2"],
      label: "Cell Color 2",
      type: "color",
      value: "#D3B427"
    },
    {
      cssVar: ["speed", "s"],
      label: "❌ Speed",
      type: "range",
      value: "0.2"
    }
  ]
};

var myKnobs = new Knobs(settings);

myKnobs.render();