optical illusion :O

pch/optical-illusion.toml

@@ -0,0 +1,160 @@
+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]