 It was the year 2023, and GUI Challenges continued! Welcome to another episode of GUI Challenges, where I build interfaces my way, and then I challenge you to do it your way. And with our creative minds combined, we're going to find multiple ways to solve these interfaces and expand the diversity of our skills. And in today's new edition, new year 2023, GUI Challenge, we're building this glitchy effect. And I just love glitchy effects, but it's so weird. How come the cyber future, which is like so much more technologically advanced, is always so unreliable and glitchy? Like, what's up with that? There are so many rad glitch effects that can be found on the web. I wanted to make one my way. And in this case, I wanted to use clip path and skew to sort of like, in a more simple way, with no pseudo elements or anything. I just wanted to, you know, tweak the box. And in this case, clip path makes a bunch of these slices into the box. And then skew, sometimes timed at exactly the same time as that random grunge, skews it really heavily, makes it look all stretched and warped, like something happened to it over the network. And I think the effect turned out pretty cool. And it's made of a couple of simple basics. So I'm really excited to show this to you. But here's a couple more things to show you. Like, of course, it works in light mode. You know, this is, this is a GUI Challenge. Of course, there's going to be a light and a dark theme. And I think the light theme actually looks pretty cool. I kind of want to see the whole, let's go back to dark. I think the color is deep pink. Yeah, let's look at yellow. Oh, yeah, that's pretty sweet. I'm going to leave that there for right now. And if you didn't notice when I was editing here, you can also change it. So here I'll put Argyle in here. Right? Let's look at Chrome. Ooh, Chrome looks pretty sweet. I mean, Chrome's just like a cyber word, isn't it? That's kind of funny. How about Google? Does that look cool? No, it looks kind of spooky. Way less cyber or whatever. Let's go back to Chrome. That was sweet. The C is kind of whatever, you know, but anyway. So this is what we're building today, using two key ingredients. And let's go check it out in the debugging corner, and then we'll break it down. The debugging corner instances of all these browsers, all at once for us to see, it's always a marvelous sight. And especially look at them all glitching. It kind of feels like my computer is actually glitching. I love it. They're all kind of going at random times whenever they last loaded. It's pretty sweet. Okay. So here up here is iPad with, you know, the latest version of iOS on it. It's iOS 16. So we have Safari looking great. The effect looks perfect. And it looks great on the iPad and the light there. Here it is in dark mode on iOS on desktop. Here it is on iOS, you know, on a mobile device. Here it is on the Android simulator inside of Chrome. Here's Chrome actual. And here's Firefox. And everybody is very happy rendering this effect because it mostly does nothing. There's a lot of waiting. So there's a bunch of keyframes that don't do anything. And then some keyframes for like one snap of a second go tweak, and then they tweak back. And all these browsers are like, okay, yeah, we know how to handle Clip Pass and we know how to handle a skew. So this effect is no big deal. And if you look, I've shown a little bit of the process that we're going to go through seeing look, there's a generate button underneath here. And the generate button is going to generate multiple random versions of that kind of cross hatched grunge. You can see generating values down here. And I'm going to go over how we made this because it would have been a really big pain to hand write all those polygons that gave that kind of grunge effect. So I made a little function that just generated them for me. And then I put that in my CSS and I, you know, move forward and I can kind of hit generate a bunch of times. And anyway, we'll get there. But here it is on all the different devices. And now let's go back to Chrome and start breaking down how I got here. How did I get to this effect? All right, let's do a quick little breakdown of the fundamentals of like, how is this being achieved? So I'm going to pop open DevTools. I'm going to turn the animation off so that way we're not continuously glitching. And I'm just going to kind of show you the shape of the clip pass. So this is how I got started is I made a polygon. Well, I need to call the polygon function. And in here you pass a bunch of pairs. So if I do like 0% 20%, that's not going to be very meaningful. But if I do 50% like 80%, that one's also not that great. How about 35% 34? Sure, whatever typo I get is going to be fine. Ah, now we start to see some of the slicing that's happening. Let's make this one in the higher range. 80% and 90%. Yes. Okay, look, we got like a Zoro Z that was totally accidental because while I was trying to be random, and then what I did in the generator, you can see how many pairs are in here. There's a lot of key value pairs. So let's even just try this on. So let's grab this whole polygon, grab it in here to the end and paste it in. And boom, that's the effect that this particular one generated here. Let's grab another one. Pop that in here and another one, right? Okay. So that's how we got the kind of grunge effect to happen. And then let's check out the transform. And this was a skew. So skew can do effects like that. But in this particular case, I wanted to have a pretty extreme skew. And look, there's like a couple of different ways you could you could skew it like that. You could skew it here. But I wanted that really wild stretch effect because that's totally what happens when things are glitching. And then, and notice like this turn here is not that important, but you can kind of flip it a little bit if you want to. Anyway, that looks pretty good to me. But it's way too wide. I mean, this is going way outside of the width of the viewport. So let's add another transform and we're going to scale Y, I think. Let's let's try that one. Scale Y at 1.5, sure. But I want to make it smaller, not wider. Yes. Maybe a 0.2 was good. Okay. And then we can come back into our skew here and try to find a happy spot where it's like really stretched out. Yeah, that's pretty good. I mean, here we'll go there. Although that looks kind of cool. Look at how that's tilting. We've got like a really cool 3D tilt effect going on. Okay, whatever, I'm getting distracted. This is essentially what we wanted though is we go from something that's regular, we grunge it, we tweak it, and then we set it back really quickly over and over again. So if we look at the keyframes here, we have a keyframes called Cyberpunk Glitch. Add 0%. We're going to apply one of our grungy effects here. Let's apply a grungy effect. Excellent. So at 0%, we've got the grunge effect at 1%. The grunge effect goes away. Oh, the grunge effect is gone. Great. That is the essentials of what's happening here. So at 0%, we've got a grunge effect at 1%. We turn it off at 4%. We grunge again at 5%. We turn it off. So the grunge really only lasts for about 1% of the animation. And so depending on how long it is, you'll get a shorter or longer sort of moment of grungy glitchy effect. And then we take these same keyframes and we line them up with the transform so that the transform kind of tweaks at the same time that the clip path does. So if I turn the animation back on, we can see we have two different effects going on here. We have Cyberpunk Glitch, which we can see is being generated here by this little generator. We'll go over that in a second. And then we have Skiu Glitch. And let's go find those keyframes. Right. Okay. So here's Skiu Glitch. Now if I can close this, I can kind of see a few more of them. Right. At 0%, here's our Skiu. 27%, here's our Skiu. 27% is going to line up with this one. Notice there's not a 4%. So if you really watch this again, sometimes it does the grunge and doesn't do the Skiu. And I thought that just added to this sort of random nature of a glitch. Sometimes they don't line up perfectly. And that was just an artistic moment that I got to take inside of this animation. So here's all of our Skius all set up. Looks like we were scaling Y at 0.25. Awesome. And here's the same thing with Transform None, turning that off as those things go. And then here's all our clip paths. Right. Very cool. So that is how the, like the foundations work. And then let's work through how I kind of made it all work together. How did I orchestrate? And how did I generate this particular set of styles? And then you can go generate a bunch of your own grungy clip paths and your own, you know, Skiu transforms. And so yeah, let's go check out some code next. All right, let's start by checking out the HTML. Up here I've got an H1, content editables, what allows me to click inside that H1 and change the text, kind of a cool little attribute if you didn't know it existed. And it's just got some texts in there for us to work with. Then I have a button that we're going to watch for clicks on to generate new sets of keyframes that go inside of this pre. And when the page loads, we're going to populate the pre also. And we'll go check that JavaScript out in a second. But that's the extent of the HTML. I mean, really all we needed was this H1 with some text in it, which is kind of fun. If we look at the style entry point, we've got open props being imported into a design system layer, also normalized and also some buttons. We get like an adaptive style sheet for light and dark styles and we get some adaptive buttons. These just make that bear button look a lot better. And we have a glitch.style sheet being loaded into a layer called demo. So that way if you go inspect the styles, you know exactly what to focus on. We're loading a custom font. We've got some supporting styles over here. Then if we look at the glitch.css file, we're making sure that this user, if they're going to get this animation, they better have no preference on reduced motion because we don't want to give them this glitchy effect if they want reduced animations. They should just get some regular text and not be bombarded with some glitchy skewy text effect that's going to be very distracting. So as long as they're okay with motion, we're going to give them these keyframes here. And we've got that cyberpunk glitch at seven seconds with step end as the timing function. And this is going to run forever. We have skew glitch, seven seconds, step end, also running infinitely again. And then here's that skew glitch, just kind of nice and succinctly here. Let's even bumped out there. Yeah, that's nice. So here's our skews and here's our transforms to none. And that step end function here is what's crucial to work with transform none. So we have zero setting a skew, then we have one setting the transform to none. And what step end is going to do, it's going to make sure that when we hit one, it's going to jump there and it's going to stay there. It's going to stay at that step end until it reaches this next one. And then it's going to begin. And that's kind of a cool trick for creating pauses in between various keyframes. And then we have our generated style down here. So this is what was generated. I just copy that right out of that demo page and paste it right here. And that's the extent of the animations there. Okay, so let's check out the JavaScript since that seems to be the kind of core of the randomness that's happening here. So we've got a function called glitchy paths, function called punky polygons, which I thought was a very fun illiteration. Then we have a function called rando, which probably could be called like random number between zero and 100. But you know what, rando is just a fun word to say. It's almost like Rambo. It's like a random Rambo called rando. I don't know. Anyway, so right when this page loads, we call glitchy paths and that's what's going to create all those keyframes and stick them inside that pre. We'll go check out that function in a second. And then when that button gets clicked, call that glitchy paths function again and generate some new random stuff. So glitchy paths is going to be generating a bunch of cool random keyframes and polygons for us. Okay, and then if we look at glitchy paths, what's going on inside of here? We have a query selector hitting that pre. We're going to set the text content equal to the string literal and that's going to preserve all our new lines and all this indentation and stuff. It's pretty sweet. We have our keyframe cyberpunk glitch and here's all our different keyframes inside of here and our clip path none. So everything's all in there. We trim also at least I trim so that it gets rid of all the space that was left at the beginning. See these new lines? This space and this space, it trims that down. So it's just this little code block here just like we expect it to be. So trim is a cool function for trimming up usage after string literal. And then this is the crutch of our kind of randomness inside of the polygons. We're calling this function called punky polygons right in the middle of the string literal to populate this polygon function with a whole bunch of random polygon pairs. So let's go check out that. This is a lot of P words. You know, polygon pairs with paths and punky stuff, clip, anyway, whatever. Okay, I'm done. That was fun though. Punky polygons. This one was like the most fun one to write because it was so succinct in the way that it worked. So I created a new collection. Well, I create a new array basically. And I iterate 25 times. So I'm going to create 25 pairs of path information. And I'm going to do that in that loop. I'm going to call collection.add. So I'm going to add a pair and it's just a string. And inside of there, I'm going to call random. So I'm going to get a number between zero and 100. So this could be 20% and this other one's 40% or whatever. We're going to get some sort of random pair of positions here. And then at the very end, we're going to return this array to that string literal and glitchy paths. And we're going to take the values out of that collection. We're going to join them by a comma. So we're essentially going to make one big long string where all of those pairs of polygon positions are now joined together by a comma. And we have a comma separated set of pairs ready to go into that polygon set. And that's it. So this gives us that random information. This would have been totally a pain to write by hand. But here I am making this function that gets the task done really swiftly. And that concludes this GUI challenge on how I made a cyber punky glitch effect using clip path and skew. If we pop open the animation panel here, I'll head escape, find animations here, play it through, right? Okay, excellent. And maybe I need to check off and on the animation. There we go. I wanted to see this here so I could grab. Yeah, now we can kind of pull through and see all these different states. If I'm really careful, there's a skew. There must be a set of glitchy grunge. Yep. Here comes a skew as well. So we can see where the skews and the grunges line up. Pulling this little timeline here. We can see it runs forever. I love this view. I think this is pretty cool. So I want to see what type of grungy effects you're using. I definitely have seen them using different text shadows. So you have like a blue and a red, sort of like 3D hologram effect. I've seen various shadows. Well, I guess I just called out the shadows, but there's like a pseudo elements that show up on all sorts of creative ways to take this sort of next level and make it really sort of holographic and other cool things. Anyway, this effect has no end in terms of fun that can be delivered. Let me know if you liked this in the comments. Go ahead and fork this and make your own cyberpunk effects. And I can't wait to see them. I'll see you on the next squeeze challenge, y'all.