<!-- Tutorial:  https://texteffects.dev/posts/flickering-text-effect -->

<div>
  <h1 class="text" data-flicker="i" contenteditable>
    Flicker
  </h1>
  <span class="text" aria-hidden="true">i</span>
</div>

<!-- Read up on why I don't use pseudo-elements, data attributes and the css content property, tldr it has accessibility issues. I've left the css in the code for when it is eventually supported, but for now the separate span is the most accessible option https://textlab.dev/posts/data-attributes-and-text-effects-->

<!-- The div isnt really needed its just because this setup made it easier for me for editability, option without div and nested span here
https://codepen.io/mandymichael/pen/OJGjXgO
-->

<fieldset>
  <label for="flickerLetter">Letter</label>
  <input type="text" id="flickerLetter" />
  
  <label for="flickerLetter">Offset</label>
  <input type="text" id="flickerPosition" />
</fieldset>

body {
  background: linear-gradient(45deg, #2d2d2d 9%, #000 100%);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  position: relative;
}
/* The div isn't really needed its just because this setup made it a bit easier for me for editability with the inputs, option without div and nested span is at the following link
https://codepen.io/mandymichael/pen/OJGjXgO
*/

h1 {
  color: rgba(45,45,45,1);
}

.text {
  font-family: "Fira Mono", monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2ch;
  font-size: 14vw;
  line-height: 1;
  margin: 0;
  
  // using data-attributes and css content causes accessibility issues
  // &::before {
  //  content: attr(data-flicker) / '';
  //  position: absolute;
  //  color: #ffcc00;
  //  width: 100%;
  //  left: calc(var(--offset) * 1ch + calc(var(--offset) * 0.2ch));
  //  animation: flicker 3s linear infinite;
  // }
}

span {
  --offset: 2;
  position: absolute;
  color: #ffcc00;
  left: calc(var(--offset) * 1ch + calc(var(--offset) * 0.2ch));
  animation: flicker 3s linear infinite;
  
  // When using a span this is needed for positioning
  top: 0;
  z-index: 1;
}

@keyframes flicker {
  0%, 19.9%, 22%, 62.9%, 64%, 64.9%, 70%, 100% {
    opacity: 0.99;
    text-shadow: 
      -1px -1px 0 rgba(255,255,255, 0.4), 
      1px -1px 0 rgba(255,255,255, 0.4), 
      -1px 1px 0 rgba(255,255,255, 0.4), 
      1px 1px 0 rgba(255,255,255, 0.4), 
      0 -2px 8px, //default color
      0 0 2px, //default color
      0 0 5px #ff7e00, 
      0 0 15px #ff4444, 
      0 0 2px #ff7e00, 
      0 2px 3px #000;
  }
  20%, 21.9%, 63%, 63.9%, 65%, 69.9% {
    opacity: 0.4;
    text-shadow: none;
  }
}


fieldset {
  font-family: "Fira Mono", monospace;
  border: none;
  position: absolute;
  bottom: 20px;
  color: #a3a3a3;
}

label {
  font-size: 14px;
}

input {
  background: #a3a3a3;
  border: 1px solid #000;
}

const letter = document.getElementById("flickerLetter");
const offset = document.getElementById("flickerPosition");
const span = document.querySelector("span");


letter.addEventListener("input", function() {
// For data-attributes
  // span.setAttribute("data-flicker", this.value);
  span.innerHTML = this.value;
});

offset.addEventListener("input", function() {
  span.style.setProperty("--offset", this.value);
});