JSFiddle - React, Tailwind, and code Playground

by amotor

HTML

<div class="word-cloud"></div>

CSS

* {
  padding: 0;
  margin: 0;
}

body {
  overflow: hidden;
}

.word-cloud {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: sans-serif;
}

.word-cloud span {
  position: absolute;
  height: auto;
  width: auto;
  white-space: no-wrap;
  line-height: auto;
}

.word-cloud p {
  position: relative;
  font-size: calc(0.5vw * (var(--i) + 1) + 1vh);
  animation: enter 5s ease-in-out, pulse 3s ease-in-out infinite;
  color: black;
  font-family: 'Indie Flower', cursive;
  animation-fill-mode: forwards;
  transition-timing-function: cubic-bezier(0.5, 1.5, 1.5, 1, 0.5);
  opacity: 0;
}

.word-cloud span p:nth-child(3n) {
  writing-mode: vertical-rl;
}
.word-cloud span:nth-child(n) {
  transform: rotate(45deg);
}

.word-cloud span:nth-child(2n) {
  transform: rotate(-40deg);
}

.word-cloud span:nth-child(3n) {
  transform: rotate(-90deg);
}

.word-cloud span:nth-child(4n) {
  transform: rotate(120deg);
}

.word-cloud span:nth-child(5n) {
  transform: rotate(345deg);
  font-size: 20px;
}

.word-cloud span:nth-child(6n) {
  transform: rotate(20deg);
}

.word-cloud span:nth-child(7n) {
  transform: rotate(240deg);
}

@keyframes enter {
  100% {
    top: 0;
    left: 0;
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05)
  }
  100% {
    transform: scale(1)
  }
}

JavaScript

const data = [
  {word: "The", weight: 0.028594122319301037, context: "sample context"},
  {word: "sun", weight: 0.028594122319301037, context: "sample context"},
  {word: "did", weight: 0.014297061159650518, context: "sample context"},
  {word: "not", weight: 0.028594122319301037, context: "sample context"},
  {word: "shine", weight: 0.04765687053216839, context: "sample context"},
  {word: "it", weight: 0.019062748212867357, context: "sample context"},
  {word: "was", weight: 0.028594122319301037, context: "sample context"},
  {word: "too", weight: 0.009531374106433678, context: "sample context"},
  {word: "wet", weight: 0.009531374106433678, context: "sample context"},
  {word: "to", weight: 0.004765687053216839, context: "sample context"},
  {word: "play", weight: 0.019062748212867357, context: "sample context"},
  {word: "so", weight: 0.009531374106433678, context: "sample context"},
  {word: "we", weight: 0.0031771247021445594, context: "sample context"},
  {word: "sat", weight: 0.007148530579825259, context: "sample context"},
  {word: "in", weight: 0.009531374106433678, context: "sample context"},
  {word: "the", weight: 0.014297061159650518, context: "sample context"},
  {word: "house", weight: 0.023828435266084195, context: "sample context"},
  {word: "all", weight: 0.014297061159650518, context: "sample context"},
  {word: "that", weight: 0.03812549642573471, context: "sample context"},
  {word: "cold", weight: 0.019062748212867357, context: "sample context"},
  {word: "col", weight: 0.028594122319301037, context: "sample context"},
  {word: "day", weight: 0.028594122319301037, context: "sample context"},
  {word: "I", weight: 0.0031771247021445594, context: "sample context"},
  {word: "there", weight: 0.023828435266084195, context: "sample context"},
  {word: "with", weight: 0.03812549642573471, context: "sample context"},
  {word: "sally", weight: 0.04765687053216839, context: "sample context"},
  {word: "nothing", weight: 0.06671961874503575,...