HTML in Canvas is bonkers! "Your website in Doom"

Creating 3D websites, making them accessible, and SEO-friendly has been pretty much impossible. That's is until now. Command AI. We have something really cool called HTML in canvas. It's a new API. It is experimental. It is not final. Uh and look, just just to show you what I have before I show you the other stuff. This is what I have. Canvas meets DOM. So, previously, you couldn't put HTML elements inside of a canvas, but now you can. And all of these, you see, these are selectable text. Like, I can literally select this text. Uh and let me even show it to you here in inspect. You see, I have a canvas. I can open it, and here I have a section, and here I have an H1, I have a paragraph, and all of that. And all of it is animated inside of a canvas. Here, I have another example. Here, I have another one. I just asked Claude to use the API to make a few examples. And um let me see actually if this one is also Yeah, it is also selectable. Same with this one. I know these are ugly. That's not the point. The point is that we can now render these elements inside of a canvas tag, which was not a thing before. Uh now, the examples that our people creating are really cool. Obviously, one of the first things you do with a new tech, you run Doom. So, this guy has HTML in the Doom. So, in the game, you have these UI interactive UI elements, and this is a form with name, email, and you can interact with it, and it is a a form. This is an HTML form that exists inside of the uh inside of the game, and yeah, it's fully interactive. It's accessible. Well, accessible machine readable. I know it's very pixelated. That's not the point, but yeah, a really good example. Another one is by uh Wes or Wess. He's been on this. I've seen multiple posts from him. It's it's really fun. This one is a to-do app that you get to destroy. So, yeah. Why not? Uh another one I saw from this guy. This was also really cool. Uh yeah. So, you have these real HTML elements that you just normally interact with, but you can now add these effects on top of them, um which you couldn't previously. Previously, you had to uh I don't have like extensive knowledge here, but I know that you could import things, but you would they would not they wouldn't be real DOM elements. They they would be like you turn them into uh pixels essentially in the uh in the canvas, but now they are actual elements. Uh and 3.js has support for it. Actually, one of the examples that I showed uh you is a 3.js example. You can here again, the point here is you have this 3D element that is moving, but you have actual HTML elements inside of it that you can interact with. Uh this is big. This is this is going to be huge for the web and for the things that you can do uh like effects that you can do on top of everything. Here, I saw also this post. These are real WebGL shaders on top of interactive dove dove elements without the HTML in canvas API. Works in Safari, too. There is uh rough edges, but still um worth sharing. So, apparently, this API is not and was not the only way to do this, but um yeah, I I suspect that this is more like a layer on top. Um and probably like doing some mirroring. Um uh like a there's a pipeline for seeing what there is uh on the screen, um what elements the DOM is essentially giving to the browser to render, and you're running that pipeline through a shader, I think. Uh that's how it's working, this one. But, I guess the API is just it's kind of uh big deal, I would say. I I can see a future where, you know, more website and specially website builders and now with AI can have all of these cool interactivity without the trades uh trade-offs that we had before, you know. If you had an H1 in a canvas on a website, that H1 was hidden from Google. But, now it's not. It's it's just an H1 that exists in a canvas tag. Does it mean whenever we put something in a canvas tag, it's going to be rendered by a the GPU? WebGL driven websites off more often than not, um they can be faster, at least the animations can be faster because they are accelerated by the GPU. So, does that mean that we could technically some uh technically wrap an entire website and render everything in a canvas. I will I will try to figure out this weekend. GSAP animations actually do leverage the GPU. Um Really? Interesting. How? um because they animate the some some CSS properties. It's actually CSS can leverage the GPU. Some CSS properties like 3D transform actually use the That's why Mhm. um there are certain uh properties you do and don't animate. So, padding you don't animate because that doesn't leverage the GPU. It It It create It It It makes the browser repaint. Whereas um transform, opacity, um gosh, there's a there's a bunch of sense. that that are more performant. They don't cause repainting and then they leverage the GPU as well, especially 3D transforms. So, but saying that, you know, yeah, there there there are probably more complex things we can do that are more performant just because they're in the canvas. I think it's worth exploring the the performance implications of doing stuff in the canvas. Maybe the same animation in the canvas versus doing it in regular old GSAP. Do you know what I mean? If you want to do this, you have to be on Chrome. It doesn't work in Arc, for example. It's It's hidden behind a feature flag. So, you have to go to Chrome flags and then you find the HTML in canvas. It's called canvas draw element, by the way. HTML in canvas, you enable it, you restart your Chrome, and then you can you can have that. This is part of a larger conversation on my show, Command AI, which we stream live every single week. We discuss the news and all things related to AI in the world of design and web. Catch us next week and join in the banter. Command AI