Загрузка видео...

Не удалось загрузить видео

На главную

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 просмотров • 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! 🫡

Похожие видео