From 76bd66836b237bfc9804a8f9724492e8d56c57b2 Mon Sep 17 00:00:00 2001 From: mehbark <terezi@pyrope.net> Date: Tue, 9 Jul 2024 00:00:38 -0400 Subject: [PATCH] optical illusion :O --- pch/optical-illusion.toml | 160 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 160 insertions(+) create mode 100644 pch/optical-illusion.toml diff --git a/pch/optical-illusion.toml b/pch/optical-illusion.toml new file mode 100644 index 0000000..d1f35cd --- /dev/null +++ b/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]