Transcript
00:00:00This is Canvas UI, an open source library of tasteful HTML in Canvas and WebGL components,
00:00:05all framework agnostic and installable with ShadCN, so you own the code. This has some of
00:00:10the coolest components and effects that I've seen in a while, and I just wanted to share that,
00:00:14and I'm also super excited to see HTML and Canvas actually getting used, as it could seriously make
00:00:18the future of the web actually fun, and it also has a cool use case that I think a lot of people
00:00:23look over. Let's check it out. So here on that documentation you can find all of the 33
00:00:32components this library currently has, and I'll just start out with the ASCII object, which is the
00:00:36first one that comes up. You can see it's this really cool rubber duck here, but it's built out
00:00:39of ASCII objects, but it still maintains that 3D look, and we can pan this in 3D as well. Now
00:00:44installing this, as I said, is super simple. You can literally just use the ShadCN CLI, and this will
00:00:49add the code to your code base, so you can go in there later and ask Claude or something to change
00:00:52the model for you, and the effect should just work. It'll also install the dependencies for you, like
00:00:573GS, which this component uses, and that's something important to know about this library. It's sort of
00:01:02split into two components. First, we have the ones that use WebGL and 3GS, like this one, that should
00:01:07work on most modern browsers as they support those technologies, but then we also have the ones that
00:01:12use HTML and Canvas, like this bend one. You can see, as I scroll here, the HTML is actually curving
00:01:17around the page, and this is an effect that can only be achieved with HTML and Canvas, which is actually
00:01:22an experimental browser capability, which requires a Chrome feature flag to be enabled. But before I
00:01:27explain what HTML in Canvas is, one really cool thing to know about these effects is they don't
00:01:32just break on uncompatible browsers. They actually have fallbacks. So I switch over to Firefox here,
00:01:36which doesn't support HTML and Canvas, and doesn't have the feature flag, and you can see that the
00:01:40bend one here is just a normal web page now. It doesn't actually break the web page if I don't have
00:01:45HTML in Canvas enabled, which is super nice. But we also have some effects like this Blaze one here.
00:01:49You can see down at the bottom, it is working. We do have a Blaze effect, but this looks much cooler
00:01:54in HTML and Canvas. So now that I switch back to a version of Chrome that does have that feature
00:01:58flag enabled, you can see we get this really cool heat distortion effect down the bottom,
00:02:02where it's actually wobbling that HTML, and it's just a really cool subtle effect.
00:02:06Another good example of this is this bubble effect, which I'm currently using in HTML and Canvas.
00:02:10You can see we get a really cool distortion effect, and it almost looks like liquid glass when I hover
00:02:14this over the web page. But if I switch this out and go over to Firefox, you can see that it just
00:02:18looks like a normal bubble. We don't get that same distortion of the underlying HTML, since we can't,
00:02:23as we're not using HTML and Canvas. I just find it quite nice that this library actually considered
00:02:27some fallbacks when the effect doesn't work, instead of completely breaking the web page.
00:02:31But now let's talk about what HTML and Canvas actually is, because I've mentioned it quite a lot
00:02:36already. While I explain this, I'm going to show some of the components on the side here,
00:02:39and at the end, I'm also going to show you my five favorite components, so stick around to see that.
00:02:43The first thing to know is, I've actually done a video on HTML in Canvas before, so if you want a
00:02:48detailed look, go ahead and watch that video after this, and subscribe to stay up to date with AI and
00:02:52software development. But to give you a quick recap, normally if you want a GPU effect over your
00:02:57content on the web, you have two options. Option one is that you rebuild your content inside of a
00:03:01canvas, so now you're drawing your own text and writing your own layout engine, and you can't use
00:03:06components like select, and that means accessibility, search, translation, find on page, all of that
00:03:11completely breaks. This is why companies like Figma had to build a browser inside of a browser,
00:03:16and why Google Docs runs its own layout engine. Option two is that you essentially screenshot your
00:03:21DOM and draw a picture, and that's what a library like HTML to Canvas does, and it's essentially just
00:03:26a reimplementation of DOM and CSS rendering inside of a canvas, but it doesn't support everything.
00:03:31So both of those options aren't so great and have a lot of trade-offs, and this is what
00:03:34HTML and Canvas is trying to fix. It's currently a WICG proposal, but it adds a method called draw
00:03:40element image, and that takes a real DOM element and draws it inside of your canvas. It also has a
00:03:45method called text element image 2D for WebGL, and copy element image to texture for WebGPU,
00:03:50so you can actually pull a live DOM element in as a texture to a 3D scene. The key to all of it though
00:03:54is that the HTML element stays as a real element. It stays completely in the accessibility tree,
00:03:59it stays selectable, and when it updates, the canvas updates as well. The real TLDR of
00:04:04HTML and canvas is just think of it as shaders for HTML, or a reincarnation of Flash. If you're still
00:04:10a little bit confused, as I said, go ahead and watch my deep dive video, but now let's get on to my five
00:04:14favorite components from this library. The first one is this decrypt reveal component. I just think it's a
00:04:19super cool effect, how it can actually take the underlying component, and then make it ASCII scrambled like
00:04:23this, and as you hover over, it reveals what the actual component is. I can actually see using this
00:04:28when you have a one-time secret pop-up, you have that one time to copy it. You could have a cool
00:04:32effect like this, so when they hover over it, they can copy the key underneath and then go away. I
00:04:36just think that'd be a really cool place to use this effect. The second component is this flame wrap one.
00:04:40I just think it adds a really cool border effect, and we also have that same heat distortion that we saw
00:04:45on the flame effect. And you can see that it just adds a really nice border around these elements,
00:04:49and I could see using this when you have a destructive command. Maybe like where delete
00:04:53repo is on GitHub. I know it has a red button, but imagine surrounding that in a red flame. That
00:04:57would let users know that it's extra destructive. The third effect is this peel one here, and I
00:05:01probably wouldn't use this one in practice as it's unclear where it actually is. You can see as I
00:05:06hover over to the side here, it peels away and reveals that sidebar like a page is being peeled back.
00:05:11Now, as I said, I probably wouldn't use that in practice as it's unclear where the sidebar actually is,
00:05:15but I just think it's a super cool demo of how to use HTML in Canvas. The same goes for effect number
00:05:20four, which is ripple here. You can see the web page looks completely normal for now. As I click
00:05:24about, you can see it adds a really nice water ripple over the entire HTML. And again, I just
00:05:29think this is a cool showcase of HTML in Canvas modifying the actual HTML itself and adding a shader
00:05:34like effect on top. I'm not too sure where I'd use this in practice, but I can imagine some fancy
00:05:38marketing sites would love this effect. They'd also love effect number five, which is the shatter one,
00:05:43which as you can see, as I move my mouse around, it's shattering the actual underlying HTML on the
00:05:47web page into 3D glass shards. And again, all of these, I just think are such a cool showcase
00:05:52of what HTML in Canvas can do. And I really hope that it gets implemented into modern browsers one
00:05:57day. So those are just a few of my favorite effects and components from this library.
00:06:00But now I want to show you a use case that you can do today that I don't think enough people know
00:06:04about. Now it is a little bit niche, but canvas UI and HTML in Canvas are super cool to use with
00:06:10tools like remotion and hyperframes to actually add effects to your videos that have been generated
00:06:15with code. Both of them already support this. So let's say I take the VHS effect from canvas UI,
00:06:20and I asked Claude here with hyperframes to add this effect to my webcam video that I recorded earlier.
00:06:24Once this is complete, you can see this is the final product. So I'm now coding in video effects
00:06:29and editing this video as I go. I could also ask Claude to switch this to the rain effect,
00:06:34and it does so with ease. Or I could ask Claude to add in a few glitches here and there. And these are
00:06:38all effects from the canvas UI library. As someone who is a better developer than an editor, this is
00:06:43just a super cool niche use case for me that I just had to share with you guys. So that is canvas UI.
00:06:48Would I use this? Well, some of it, yes. The WebGL overlay effects, the ones that work everywhere,
00:06:54those I'd happily ship tomorrow on a landing page or a marketing site. And the HTML and canvas ones,
00:06:59I'd probably only stick to demo sites for now as it's cool to show off what could come in the future
00:07:03with HTML in canvas. But I could also use them today for those video effects, which I showed,
00:07:07which is a really cool use case. What do you think? Do you find this library cool? Do you have any other
00:07:11cool libraries? Let me know in the comments down below. Wait there, subscribe. And as always,
00:07:15see you in the next one.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video