cohost/pch/optical-illusion.toml

version = 1

[[modules]]
plugin = 'source.text'
data.contents = '''
<div id=main>
  <div id=circle>
    <div id=text>
      your brain<br>
      tricks you into<br>
      thinking that this is<br>
      readable:<br>
      jdfklieyhglmn
    </div>
    <div id=unwiggle>
      <div id=wiggle>
        <div id="alt-text-no-not-like-that">
          <span class=old-text>
            your brain<br>
            tricks you into<br>
            thinking that this is<br>
            readable:<br>
          </span>
          <span class=new-text>
            homestuck lol
          </span>
      </div>
    </div>
  </div>
  <div id=spooky>
    <span class=old-text>
      your brain<br>
      tricks you into<br>
      thinking that this is<br>
      readable:<br>
    </span>
    <span>
      <span class="word w1">BUT </span><span class="word w2">YOU </span><span class="word w3">KNOW </span><span class="word w4">THAT'S </span><br><span class="word w5">NOT </span><span class="word w6">TRUE </span><span class="word w7">RIGHT</span><span class="word w8">?</span>
    </span>
  </div>
</div>'''
data.language = 'html'
sends = [2]
title = 'html'

[[modules]]
plugin = 'source.lesscss'
data.contents = '''
#main {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
}

#circle {
  width: 50%;
  height: 50%;
  margin: auto;
  border: 0.4rem solid rgb(calc(var(--tw-border-opacity,0)*255), calc(var(--tw-border-opacity,0)*255), calc(var(--tw-border-opacity,0)*255));
  transition: color 1s ease;
  border-radius: 413rem;
  text-align: center;
  display: grid;
}

#circle > div {
  grid-area: 1/1;
}

.old-text {
  color: transparent;
} 

.new-text {
  background-color: rgb(
    calc((1 - var(--tw-border-opacity, 0)) * 255),
    calc((1 - var(--tw-border-opacity, 0)) * 255),
    calc((1 - var(--tw-border-opacity, 0)) * 255)
  );
  transition: background-color 1s ease;
}

#alt-text-no-not-like-that {
  transform: translateX(40rem);
  animation: spin 5s 10s both linear;
}

#wiggle {
  transform: translateY(2rem);
  animation: spin 0.25s 10s 20 alternate both ease;
}

#unwiggle {
  transform: translateY(-2rem);
}

#spooky {
 transform: scale(1.02);
 animation: spin 0.5s both infinite alternate ease-out;
}

.word {
  transform: translateY(40rem);
  display: inline-block;
  background-color: rgb(
    calc((1 - var(--tw-border-opacity, 0)) * 255),
    calc((1 - var(--tw-border-opacity, 0)) * 255),
    calc((1 - var(--tw-border-opacity, 0)) * 255)
  );
  animation: spin 10s both linear;
  color: maroon;
  transition: background-color 1s ease;
}

.w1 {
  animation-delay: 20s;
}

.w2 {
  animation-delay: 22s;
}

.w3 {
  animation-delay: 24s;
}

.w4 {
  animation-delay: 26s;
}

.w5 {
  animation-delay: 28s;
}

.w6 {
  animation-delay: 30s;
}

.w7 {
  animation-delay: 35s;
}

.w8 {
  animation-delay: 40s;
}

.w5, .w6, .w7, .w8 {
  background-color: none !important;
}'''
sends = [2]

[[modules]]
plugin = 'transform.style-inliner'
data.mode = 'attr'
sends = ['output']

[[modules]]
plugin = 'source.lesscss'
data.contents = ''
graphPos = [-120, 192]