Randomized Colorized Letter

index.html

<div id="page"></div>

randomized-colorized-letter.markdown

Randomized Colorized Letter

Letters in Random Color Glow Up.

A Pen by Nielsen on CodePen.

License.

script.babel

import * as React from "https://cdn.skypack.dev/[email protected]";
import * as ReactDOM from "https://cdn.skypack.dev/[email protected]";

function HomeHeader() {
  const textContainerRef = React.useRef();

  let colors = ["lightgreen", "#FFD700", "#FF6103", "#cb0fcb", "#223064"];
  React.useEffect(() => {
    const childNodesOfTextContainer = document.querySelector(
      ".main-text-container"
    )?.childNodes;

    let activeChildrensIndex = [];
    let allChildrens = [];
    childNodesOfTextContainer?.forEach((node, index) => {
      if (node.nodeName === "H1") {
        allChildrens = [...allChildrens, ...node.children];
      }
    });

    function getRandomChildrens(limit) {
      let i = 0;

      while (i < limit) {
        const randomChildIndex = pickARndomChildrenIndex(
          activeChildrensIndex,
          allChildrens.length
        );

        const randomChild = allChildrens[randomChildIndex];
        const randomColorIndex = Math.floor(Math.random() * 10) % colors.length;

        randomChild.style.color = `${colors[randomColorIndex]}`;
        activeChildrensIndex.push(randomChildIndex);
        i++;
      }
    }

    function pickARndomChildrenIndex(activeChildrensIndex, totalChildrens) {
      const randomIndex = Math.floor(Math.random() * 100) % totalChildrens;
      return activeChildrensIndex.includes(randomIndex)
        ? pickARndomChildrenIndex(activeChildrensIndex, totalChildrens)
        : randomIndex;
    }

    const interId = setInterval(() => {
      //* remove the styles for activated childrens
      allChildrens.forEach((childNode, index) => {
        if (activeChildrensIndex.includes(index)) {
          childNode.style.color = "#ffffffe1";
        }
      });

      //* clear all the array

      activeChildrensIndex.length = 0;
      const getARandomLimit =
        (Math.floor(Math.random() * 10) % (allChildrens.length - 5)) + 1;

      getRandomChildrens(getARandomLimit);
    }, 1450);
    return () => clearInterval(interId);
  });
  return /*#__PURE__*/ React.createElement(
    React.Fragment,
    null,
    /*#__PURE__*/ React.createElement(
      "section",
      {
        className: "home-section-1"
      },
      /*#__PURE__*/ React.createElement(
        "div",
        {
          className: "main-text-container",
          ref: textContainerRef
        },
        /*#__PURE__*/ React.createElement(
          "h1",
          null,
                  /*#__PURE__*/ React.createElement("span", null, "N"),
          /*#__PURE__*/ React.createElement("span", null, "o"),

        ),
        /*#__PURE__*/ React.createElement(
          "h1",
          null,
          
          /*#__PURE__*/ React.createElement("span", null, "M"),
          /*#__PURE__*/ React.createElement("span", null, "o"),
          /*#__PURE__*/ React.createElement("span", null, "r"),
           /*#__PURE__*/ React.createElement("span", null, "e")
        ),
        /*#__PURE__*/ React.createElement(
          "h1",
          null,
          /*#__PURE__*/ React.createElement("span", null, "i"),
          /*#__PURE__*/ React.createElement("span", null, "C"),
          /*#__PURE__*/ React.createElement("span", null, "l"),
          /*#__PURE__*/ React.createElement("span", null, "i"),
          /*#__PURE__*/ React.createElement("span", null, "c"),
          /*#__PURE__*/ React.createElement("span", null, "k"),
          /*#__PURE__*/ React.createElement("span", null, "e"),
          /*#__PURE__*/ React.createElement("span", null, "r")
        ),
        /*#__PURE__*/ React.createElement(
          "p",
          null,
          "Explore a vast list of Anime and Characters. Comes with full details on them."
        )
      )
    )
  );
}
const container = document.getElementById("page");
ReactDOM.render(React.createElement(HomeHeader, null), container); // Initial render

style.scss

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@900&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  background:black;
}
.main-text-container{
    color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 3rem;
/*     gap: 0.6em; */
  
  h1{
     color: #ffffffe1;
    
   // text-transform: capitalize;
   font-size: clamp(12vw,22vw,12em);
    line-height: .86em;
    // letter-spacing:0.em;
    
    span{
      font-family: 'Fira Sans', sans-serif              !important;
      transition:  500ms linear;
    }
   
  }
}