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]