正在加载视频...

视频加载失败

Introducing Canvas UI, the first ever html-in-canvas component library. Your DOM is the render target now. Real-time shaders over real, interactive UI. 24 components. React, Vue, Svelte, vanilla TS. Free. Open source. 🧵

1,429,494 次观看 • 3 个月前 •via X (Twitter)

73 条评论

David Haz 的头像
David Haz3 个月前

This wasn't possible until now. The tech literally didn't exist. html-in-canvas lets shaders read and redraw your real DOM in real time, while text stays selectable and links stay clickable. Everyone else has demos. This is a full library. A new dimension for the web. Literally.

David Haz 的头像
David Haz3 个月前

24 components at launch: Liquid. Blaze. Glass. Shatter. VHS. Particle Reveal. Cloth. Ripple. Droplets... Each one a single command. No package, no dependency, the source lands in your project, yours to edit.

David Haz 的头像
David Haz3 个月前

Probably the most AI-ready component library out there: ▸ shadcn registry + MCP: agents browse & install everything ▸ Copy for AI everywhere: prompts, configured code, markdown docs ▸ Open any page in ChatGPT, Claude, or v0 ▸ llms.txt built in ⭐

grim 的头像
grim3 个月前

The browsers shipped the tech, but it was virtually untouched until now, and i hate to be dramatic but this is groundbreaking man I think hex float blew my mind the most We're going to see some really crazy landing pages come out in the next 6 months 🔥

David Haz 的头像
David Haz3 个月前

Man thank you, this means a lot! It’s only the start, with broader browser support in the future, this will be the next big thing, I’m sure.

Poimandres 的头像
Poimandres3 个月前

We are exploring HTML-in-Canvas as a native React API (or R3F API if native does not make sense). DM me if you are interested in being part of it!

David Haz 的头像
David Haz3 个月前

That sounds great, the only thing is, I want to keep this lib framework/library-agnostic! Interested to see what you will build though!

Poimandres 的头像
Poimandres3 个月前

It would be great to get your input all the same. It is an opportunity to give feedback to Google on the API.

Fernando Rojo 的头像
Fernando Rojo3 个月前

Great demos. Btw, I would make the popover that tells me I'm missing the Chrome feature flag more prominent. I almost missed it.

David Haz 的头像
David Haz3 个月前

Will do!

OrcDev 的头像
OrcDev3 个月前

I covered Canvas UI in my latest video:

David Haz 的头像
David Haz3 个月前

I’m gonna need to sit down for this one! Thanks for making a special video for it ❤️

Dev Ed 的头像
Dev Ed3 个月前

One of the coolest projects I’ve seen in a long time! Big congrats

David Haz 的头像
David Haz3 个月前

Thanks a lot man, means a lot! ☀️

OrcDev 的头像
OrcDev3 个月前

omg can't believe how good is this, you cooooooked!

David Haz 的头像
David Haz3 个月前

The craziest @shadcn registry just dropped 👀 Thanks man!

Igor Costa 的头像
Igor Costa3 个月前

Nice, it took us almost 16 years to have Flash player tech once again.

David Haz 的头像
David Haz3 个月前

Flash player tech, but make it modern 🤓

Daryl Ginn 的头像
Daryl Ginn3 个月前

Fire.

ORB 的头像
ORB3 个月前

Finally. HTML- in-canvas is so cool. Truly a shame most browsers still don’t have support (let’s not even think about mobile). Just stuck in Demo world for now but this is GOATED

David Haz 的头像
David Haz3 个月前

We’ll get there.

François Best 的头像
François Best3 个月前

I KNEW IT Congrats David, this looks amazing!! 🔥

David Haz 的头像
David Haz3 个月前

Hehe! Next up is adding nuqs! 👀 Thank you!

François Best 的头像
François Best3 个月前

Haha I was just thinking about that while playing with the controls 🫶

David Haz 的头像
David Haz3 个月前

Don’t you dare think I forgot about it!

Semih Mutlu 的头像
Semih Mutlu3 个月前

Idles for tech demo vid lmao, pretty good. 🔥🔥🔥

David Haz 的头像
David Haz3 个月前

Real recognizes real 🫡 I had to do it!

nader dabit 的头像
nader dabit3 个月前

🔥🔥🔥

David Haz 的头像
David Haz3 个月前

🙏

grim 的头像
grim3 个月前

holy shit you weren't joking when you said what you were going to announce would be crazy

David Haz 的头像
David Haz3 个月前

Yessir, I’m glad you think so!

Manu Arora 的头像
Manu Arora3 个月前

CRAZY!!

David Haz 的头像
David Haz3 个月前

Thank you bro! Much love.

Tere Labs 的头像
Tere Labs3 个月前

looks amazing!

Tere Labs 的头像
Tere Labs3 个月前

also will be very glad if you check out our new project 🤝 any feedback will help a lot

Kevin ⨀ 的头像
Kevin ⨀3 个月前

Holy fgggg

Spencer Taylor 的头像
Spencer Taylor3 个月前

@Adrian_Stevens for vis - imagine the @rootappofficial apps you could build with this

steve caldwell 👨‍🍳 的头像
steve caldwell 👨‍🍳3 个月前

incredible! me and @digitalben3030 have been obsessed with dithering lately. we sidequested and opensourced today using Canvas UI.

Den 的头像
Den3 个月前

Amazing work, love this! 😍

David Haz 的头像
David Haz3 个月前

Tysm! 🙏

Den 的头像
Den3 个月前

I'm taking some inspiration from your work. 😊

60fps 的头像
60fps3 个月前

Crazy 💥

David Haz 的头像
David Haz3 个月前

Thank you!!

Sergio Quijano 的头像
Sergio Quijano3 个月前

Very cool. Been using reactbits components for a long time now! Keep the great work :)

David Haz 的头像
David Haz3 个月前

Thank you! 🙏

𝓖𝓚 的头像
𝓖𝓚3 个月前

This + ChatGPT Work sites🔥🔥🔥

symbols 的头像
symbols3 个月前

why is it free?!

David Haz 的头像
David Haz3 个月前

@zenohosting Because open source rules. Enjoy!

symbols 的头像
symbols3 个月前

you're taking contributions ;P?

David Haz 的头像
David Haz3 个月前

@zenohosting of course! Feel free to explore the repo.

symbols 的头像
symbols3 个月前

I was gonna go sleep! Are you advising I tinker more?! I’m building some datasets

David Haz 的头像
David Haz3 个月前

@zenohosting Sleep is important haha

symbols 的头像
symbols3 个月前

yeah i need a refresher soon but i'll go peek. do you think this dataset can help with UI design Ai stuff?!

Sean 的头像
Sean3 个月前

@lavrton

Robert Zapp 的头像
Robert Zapp3 个月前

What

David Haz 的头像
David Haz3 个月前

Yes

Robert Zapp 的头像
Robert Zapp3 个月前

Mind blown. Must dive in.

YKee 的头像
YKee3 个月前

Looks like a whole new trend’s about to kick off. Congrats! 🎉 And if the performance ends up solid, that’d make it even better.

David Haz 的头像
David Haz3 个月前

Doing my best to make these performant! Thank you!

Nir Galon 的头像
Nir Galon3 个月前

Love to see Vue support from day one! 🙏💪

David Haz 的头像
David Haz3 个月前

Yessir! React, Vue, Svelte, or just raw TS. Sky is the limit.

bart nicolaas 的头像
bart nicolaas3 个月前

really nice work

David Haz 的头像
David Haz3 个月前

Thank you! 🫡

Saïd Aitmbarek 的头像
Saïd Aitmbarek3 个月前

impressive work man🔥

David Haz 的头像
David Haz3 个月前

Thank you!

Jefferson Ramalho 的头像
Jefferson Ramalho3 个月前

This page where we can see all the animated components is amazing—congratulations.

mint 的头像
mint3 个月前

Looks incredible! I work a lot with threejs in my job so I've been keeping a close eye on html-in-canvas. I hope it gets out of canary and get proper support soon in other browsers

David Haz 的头像
David Haz3 个月前

I hope so too, would be huge!

Christoph 的头像
Christoph3 个月前

now this is cool, i wonder how it performs on older devices or mobile?

David Haz 的头像
David Haz3 个月前

Did my best, but since it's open source, we can all improve it in time.

Jay 🦀 的头像
Jay 🦀3 个月前

oh boy

Paul Bakaus 的头像
Paul Bakaus3 个月前

so good!

David Haz 的头像
David Haz3 个月前

Thank you Paul! 🫡

相关视频