The Web is Getting Interesting Again

In this video, we are going to be sharing with each other some cool sites that we found from design to like interesting interactions, interesting animations. We find this stuff pretty cool, so we're going to share it with each other. Scott, what do you got for us? Well, guys, I got something really interesting. So, this is Who's this handsome guy? Oh, yes, it looks just like me. This is a flipbook.page and their idea here is that it is a visual way of browsing where ultimately what this is doing when you enter a search query is it creates an AI image and you can tell. We'll talk a little bit about this. You can tell it's AI for a number of reasons, but from there what you do is click on any one of these. Now, I will just show you the one that I clicked on, which is this apparently I'm a professional b-boy and dancer. It takes a little while, so I wanted to pre-render some of these. And um this is what it came up with. So, basically it allows you to kind of infinitely go through topics and click on them and it will generate these types of images. Now, obviously this is AI for a number of reasons. One, I've never been on Breaking Street, but my b-boy name is not Scoot. Not b-boy Scoot. Scoot, [laughter] that's not real. Krulinski. That's not real. That's great. Yeah. So, it's very funny. The some of the I have no idea what the influence of hip-hop culture on Level Up Tutorials would be either. Let's Let's see it, Scott. I'm curious what the influence is. Okay, my specialty is power moves and footwork, so I will say it did get that right somehow. Is this a public site? So, like is he paying the AI bill for as you click through here? Yeah, I looked it up. He's using like a like a a fast image gen. Okay. Okay. But, the idea with this thing is just like a test of what would the browser look like Yes. or what would the web look like if literally all the UI was generated. There's no divs, there's no CSS, there's nothing. It's simply just some model generates all the UI. Um and that might seem kind of crazy, right? And but like some people are are like looking into especially with the new OpenAI models are very well trained on user interface. Like it can just it can get like DaVinci Resolve UI perfect, you know? Yeah, but I'll say like what I'm looking at so far feels kind of like the old web mixed with the new. Like we used to have Yeah. image maps that you'd like split up to click on. And that's what this feels like. So, like if like maybe if you pre-generated it ahead of time so it wasn't slow and then also [music] like made sure that there weren't any typos or like hallucinated stuff. Like this this I like it. I like it's a cool way to explore data, I think. Yeah. [music] Yes, as a pure technical demo and like exploration into usability, I think it's neat. [music] As an actual experience, it's not, but you know. I do like their their little demo here where they have this is like what it it could be like. I think it's just really cool. It's like living and it feels like one of those diagram books where you're getting to go inside of things and stuff. Like I think this demo is really sick. Now, granted it's it's a long ways away from this demo, but I do think that like as an idea that's pretty cool. If you click go up back up to your example, if you click on the bottom right-hand corner, there's a stream video option. It uses another model to turn images into like like videos, right? So I wasn't able to get this to work, [music] which is one of the reasons why I haven't shown it. Very slow. [laughter] Um but again like yeah, like none of this information is correct. I absolutely do not use [music] strut structured rhythmic flow to do my tutorials. I don't think that's really the point of this though. The point of it is that a UI could be generated on the fly. And obviously it's slow and obviously it looks like crap and and whatever, but like like those things aside, it's an interesting look into like what would what's the future of UI? Is it possibly generated? Yes. I I I will say if you're looking at this that critical eye, I think that's the important thing to remember here. One thing I did find very odd, I just want to call this out is that it seems really Well, besides the fact that like obviously the CSS isn't good, but um it really set on having the word cancer be in here. And and but it's not just there. It's also an element named cancer here, which I obviously like I I don't know about that, but very odd. Wes [music] eight. Yeah, the new CSS property. Yes. That is like Can can you do another one for CJ and me as well? Just like let them load in the background. What do we do? Coding Garden? Sure. Yeah. I I really liked the example interactive example at the bottom cuz like that's what makes me think is like let's say you have an expert actually validate the data. Like it's real, you have like real places, real things. It's almost like an interactive textbook or like an interactive way to learn. Yeah, it feels like those books like the go inside like the how this is made type of books, which I really love. I really like that. Let's see if I can figure out who I am. Growing software. No, I just made it up. It's cool though. I mean, I I actually do like how they've they've come up with prompts to give it a consistent design style. So, that that's pretty cool. If you open up the There's a web socket that connects and if you open up the web socket, you can actually see the prompt that they're using. Okay. Of course, [music] Wes opened up the web socket. I actually love that AI doesn't know who I am cuz there is I think there's a there's like a there's several YouTube channels with people named CJ Reynolds and I think it found a different one, so. Oh, yes. Real Real rap. Real rap with CJ Reynolds. Do Wes. I bet I bet it knows about Wes. So, here we have Wes Boswell with very With the huge beard. I've never had a beard like that. Beard, sunglasses or glasses, yeah. React and Next.js expert. Nice. Beginner JavaScript, they got that right. Based in Hamilton. Twitter handle correct. Is that map correct for Hamilton, Ontario? Does that look generally right? Uh yeah, actually. That's pretty close to where I used to live. It's not exactly, [laughter] but It's doxing you. Yeah. Yeah, I used to live right on the corner of the bay there. Okay. I I just meant like the general shape of the map. Like yeah, the streets and the river and stuff. You know what this reminds me of? Microsoft Encarta. Like I used to when I was a kid, I had I had the entire encyclopedia on like a CD. I would just browse like the encyclopedia for hours and it had a lot of like interactive illustrations and visualizations. This this this is like that. But Wes, is that exactly where you used to live? So, the like the where the mountain is is is wrong, but where the pin is in relation to the water and how how it dips into the water, that's exactly where I used to live. Like it for sure it for sure knows my address. And this is like not a expensive model either. I think it's using like Gemini flash image, you know, the cheaper one. All right, who's next? I could do mine. Ooh. All right, I'm going to be showing mine. It's really dark, but I hope this shows up. This is the new Grok voice landing page and don't don't I know a lot of people hate everything around this company, but can we just appreciate the UI of this? You're probably not hearing it yet. You got textures. They've built a I don't know what you call this. Like a mixer board. I love this aesthetic of design where it's like 90s hardware. Reminds me of like a TASCAM or something like that. Yeah. Look at this one. Oh, yeah. The sound of these buttons is just so good. And if you inspect element, they're like they're actual buttons, right? It's like it's proper HTML behind the scenes for all this stuff. So, big fan. There's one more here. This is like a little radio. Yeah. Just so well done. I think if you if I inspect element, yeah, it's it's just done in like divs and CSS. Yeah. This is my favorite aesthetic for this type of thing. I thought it would be SVG and it's not. It's just I love this aesthetic. So, someone spent some time recreating these things and it's just a a really nice interface. Fun to see this type of thing. I I feel like people are not doing fun interfaces lately. Everyone's just vibe coding whatever you have. So, when you see something like this someone spent some time on this. I I do like how like both yours Wes and Scott's are reminding me of like the old web or like old interactions cuz like Yeah. this is this is skeuomorphism, isn't it? Because it's kind of like it looks like the physical world. for sure. And like we don't see a lot of that in in modern design. Yeah. But it I think it's it's really cool for interaction and like also like immersing you in the design. Like you feel like it's physical hardware. Yeah, I don't think it's a great like UI for like a product, but yeah, it is a great UI for like a landing page, right? It reminds me of like VST style. Interestingly enough, and I don't necessarily know why, but their sliders for these things Wes on all the sliders Yeah. [music] they're they're it's a bunch of buttons. So, I would feel like even even the slider in position is a bunch of buttons. Very odd choice there, but there's got to be an reason why. I feel like you could do this with like radio inputs or a radio input with CSS anchor. Remember we did the video or I did a video where it followed the currently highlighted one. This is not doing that. That's just it's using old school like calculating the location. Yeah, that definitely should be a radio. But it is just a a button that's being selected. I'm sure there's a a reason for it, but Yeah, there's almost always a reason for it. All right, CJ, what do you got? All right, so I got a site from the archives of Virgil Abloh. So they were a designer [music] in the world of streetwear and also like even like Louis Vuitton and and stuff like that. But they designed the Air Jordans the 10 collaboration back in 2017. And so [music] since Virgil has passed, his family is collecting all of the notes and everything that he's he's taken over the years of design. And so this page is first of all a really cool like sliding animation. Like as you scroll, you see the Jordan and then the text gradually appears. They're just doing this with like spans that that pop in with the text. But the cool part is like the actual archive itself. So this article talks about like how they went about designing the shoes and all of the links when you hover over them, they give you more info. Yeah, so like these are from his original notebooks when he was designing the 10s. And [music] um first of all, I just think this is this is a really cool interaction. Like this is like it's kind of like Wikipedia where you hover over links and it shows you a preview of the next article, but it's like a little window into that specific world. So I think I feel like we should see more of this in [music] articles that that have like related information. Like this is is showing some of the like the posters in the design room. Yeah. What do they call that? They call that in magazine an editorial. Editorial, you know? Can you Can you drag it around? Is it like a little window? I do believe it's a straight-up window. Yeah. Yeah. Yeah, it's a window on the page. And yeah, I just like the design. I I I think I'm I'm feeling like more sites should do this. Like it's very similar to the one that Scott showed where like it's you're diving into data. Yeah, it's contextual and then like because you are in charge of it, like you can come up with like real interesting stuff that actually dives into like the behind the scenes of like whatever you're talking about or whatever you're linking to. Yeah, it's good stuff. This was done by Jonathan Moore sent me a DM. He was the designer behind the the Yeezy site. So for those who maybe didn't see it, we did the a video on the Yeezy site and it was this really cool zooming thing and then we took it down due to to some reasons of the entire site was replaced with some awful stuff and the poor guy had had built this sick site and then they like he obviously couldn't show it to anybody cuz there was awful stuff on it. So I was really stoked when he messaged me about this because this is a really cool implementation of the site. And there's I think there's a couple other sites that go along with it, right? Like there's canary dash yellow as well or canary triple dash yellow. So a big fan of that. This rules. I love this stuff, man. I like this series of bringing cool new projects here cuz I don't know if I would have seen this even though I I love all of the topics involved here. So yeah. And I think so I might be everything in the or some of the things in the Virgil archive like get this treatment of like a page diving into them and then it's also like a shop of some of their designs that you can buy. Oh, and I think it's on Is it on Shopify? I think It does not look like a Shopify site. Yeah. Which is very impressive. Last one that I looked at was Shopify Yeah, Shopify and it was like very [clears throat] heavy web components. So yeah, we'll put the links to the designers below as well. They're probably a good follow on socials. All right, let us know what you think about these sites and keep sending us links to cool sites that you stumble upon, whether you want us to do like a breakdown of like how this thing was built or whether you want to just check it out and say this is cool and what tech they're using. We love getting them. Send us emails, DMs, whatever, smoke signal, you got it. Peace.