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 = ''' +
+
+
+ your brain
+ tricks you into
+ thinking that this is
+ readable:
+ jdfklieyhglmn +
+
+
+
+ + your brain
+ tricks you into
+ thinking that this is
+ readable:
+
+ + homestuck lol + +
+
+
+
+ + your brain
+ tricks you into
+ thinking that this is
+ readable:
+
+ + BUT YOU KNOW THAT'S
NOT TRUE RIGHT? +
+
+
''' +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]