Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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,428,338 görüntüleme • 3 ay önce •via X (Twitter)

73 Yorum

David Haz profil fotoğrafı
David Haz3 ay önce

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 profil fotoğrafı
David Haz3 ay önce

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 profil fotoğrafı
David Haz3 ay önce

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 profil fotoğrafı
grim3 ay önce

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 profil fotoğrafı
David Haz3 ay önce

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 profil fotoğrafı
Poimandres3 ay önce

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 profil fotoğrafı
David Haz3 ay önce

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 profil fotoğrafı
Poimandres3 ay önce

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 profil fotoğrafı
Fernando Rojo3 ay önce

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 profil fotoğrafı
David Haz3 ay önce

Will do!

OrcDev profil fotoğrafı
OrcDev3 ay önce

I covered Canvas UI in my latest video:

David Haz profil fotoğrafı
David Haz3 ay önce

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

Dev Ed profil fotoğrafı
Dev Ed3 ay önce

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

David Haz profil fotoğrafı
David Haz3 ay önce

Thanks a lot man, means a lot! ☀️

OrcDev profil fotoğrafı
OrcDev3 ay önce

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

David Haz profil fotoğrafı
David Haz3 ay önce

The craziest @shadcn registry just dropped 👀 Thanks man!

Igor Costa profil fotoğrafı
Igor Costa3 ay önce

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

David Haz profil fotoğrafı
David Haz3 ay önce

Flash player tech, but make it modern 🤓

Daryl Ginn profil fotoğrafı
Daryl Ginn3 ay önce

Fire.

ORB profil fotoğrafı
ORB3 ay önce

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 profil fotoğrafı
David Haz3 ay önce

We’ll get there.

François Best profil fotoğrafı
François Best3 ay önce

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

David Haz profil fotoğrafı
David Haz3 ay önce

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

François Best profil fotoğrafı
François Best3 ay önce

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

David Haz profil fotoğrafı
David Haz3 ay önce

Don’t you dare think I forgot about it!

Semih Mutlu profil fotoğrafı
Semih Mutlu3 ay önce

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

David Haz profil fotoğrafı
David Haz3 ay önce

Real recognizes real 🫡 I had to do it!

nader dabit profil fotoğrafı
nader dabit3 ay önce

🔥🔥🔥

David Haz profil fotoğrafı
David Haz3 ay önce

🙏

grim profil fotoğrafı
grim3 ay önce

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

David Haz profil fotoğrafı
David Haz3 ay önce

Yessir, I’m glad you think so!

Manu Arora profil fotoğrafı
Manu Arora3 ay önce

CRAZY!!

David Haz profil fotoğrafı
David Haz3 ay önce

Thank you bro! Much love.

Tere Labs profil fotoğrafı
Tere Labs3 ay önce

looks amazing!

Tere Labs profil fotoğrafı
Tere Labs3 ay önce

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

Kevin ⨀ profil fotoğrafı
Kevin ⨀3 ay önce

Holy fgggg

Spencer Taylor profil fotoğrafı
Spencer Taylor3 ay önce

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

steve caldwell 👨‍🍳 profil fotoğrafı
steve caldwell 👨‍🍳3 ay önce

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

Den profil fotoğrafı
Den3 ay önce

Amazing work, love this! 😍

David Haz profil fotoğrafı
David Haz3 ay önce

Tysm! 🙏

Den profil fotoğrafı
Den3 ay önce

I'm taking some inspiration from your work. 😊

60fps profil fotoğrafı
60fps3 ay önce

Crazy 💥

David Haz profil fotoğrafı
David Haz3 ay önce

Thank you!!

Sergio Quijano profil fotoğrafı
Sergio Quijano3 ay önce

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

David Haz profil fotoğrafı
David Haz3 ay önce

Thank you! 🙏

𝓖𝓚 profil fotoğrafı
𝓖𝓚3 ay önce

This + ChatGPT Work sites🔥🔥🔥

symbols profil fotoğrafı
symbols3 ay önce

why is it free?!

David Haz profil fotoğrafı
David Haz3 ay önce

@zenohosting Because open source rules. Enjoy!

symbols profil fotoğrafı
symbols3 ay önce

you're taking contributions ;P?

David Haz profil fotoğrafı
David Haz3 ay önce

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

symbols profil fotoğrafı
symbols3 ay önce

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

David Haz profil fotoğrafı
David Haz3 ay önce

@zenohosting Sleep is important haha

symbols profil fotoğrafı
symbols3 ay önce

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

Sean profil fotoğrafı
Sean3 ay önce

@lavrton

Robert Zapp profil fotoğrafı
Robert Zapp3 ay önce

What

David Haz profil fotoğrafı
David Haz3 ay önce

Yes

Robert Zapp profil fotoğrafı
Robert Zapp3 ay önce

Mind blown. Must dive in.

YKee profil fotoğrafı
YKee3 ay önce

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 profil fotoğrafı
David Haz3 ay önce

Doing my best to make these performant! Thank you!

Nir Galon profil fotoğrafı
Nir Galon3 ay önce

Love to see Vue support from day one! 🙏💪

David Haz profil fotoğrafı
David Haz3 ay önce

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

bart nicolaas profil fotoğrafı
bart nicolaas3 ay önce

really nice work

David Haz profil fotoğrafı
David Haz3 ay önce

Thank you! 🫡

Saïd Aitmbarek profil fotoğrafı
Saïd Aitmbarek3 ay önce

impressive work man🔥

David Haz profil fotoğrafı
David Haz3 ay önce

Thank you!

Jefferson Ramalho profil fotoğrafı
Jefferson Ramalho3 ay önce

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

mint profil fotoğrafı
mint3 ay önce

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 profil fotoğrafı
David Haz3 ay önce

I hope so too, would be huge!

Christoph profil fotoğrafı
Christoph3 ay önce

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

David Haz profil fotoğrafı
David Haz3 ay önce

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

Jay 🦀 profil fotoğrafı
Jay 🦀3 ay önce

oh boy

Paul Bakaus profil fotoğrafı
Paul Bakaus3 ay önce

so good!

David Haz profil fotoğrafı
David Haz3 ay önce

Thank you Paul! 🫡

Benzer Videolar