Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Just remembered, I had made a #threejs html bridge last year using svg foreign object but didn't share Asked claude to finish and deploy it, it did, its now making a plugin for threepipe HTML rendering within a canvas with support for interaction and css animations. link...

Palash Bansal

3,260 subscribers

14,436 views • 6 months ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Got HTML rendering in canvas working AS IS on all browsers, including iOS Safari - html-in-canvas polyfill - interactions - hover, focus, active, typing etc - css animations - scrolling - caret and text selection - #threejs, #webgl, #webgpu support - dark/light mode Link below

Got HTML rendering in canvas working AS IS on all browsers, including iOS Safari - html-in-canvas polyfill - interactions - hover, focus, active, typing etc - css animations - scrolling - caret and text selection - #threejs, #webgl, #webgpu support - dark/light mode Link below

Palash Bansal

30,459 views • 2 months ago

For the last couple months, our team has been working hard on a few paradigm-changing features for HTML Canvas. One of them is the ability to have HTML elements in a canvas. Here's a ThreeJS demo with a live HTML texture.

For the last couple months, our team has been working hard on a few paradigm-changing features for HTML Canvas. One of them is the ability to have HTML elements in a canvas. Here's a ThreeJS demo with a live HTML texture.

Fernando Serboncini

680,945 views • 2 years ago

HTML docs are starting to replace Notion for us. The missing piece was collaboration. So we built a Google Drive for HTML docs with a WYSIWYG editor, commenting, share links, and password protection. It works through MCP. Just ask Claude to upload to Moda:

HTML docs are starting to replace Notion for us. The missing piece was collaboration. So we built a Google Drive for HTML docs with a WYSIWYG editor, commenting, share links, and password protection. It works through MCP. Just ask Claude to upload to Moda:

Anvisha

357,505 views • 1 month ago

can't wait for html-in-canvas? you don't have to, it works now in all browsers internet is going to be lit in a few years here are all the best html rendering in canvas demos made in the last month - frozen form ハシモトタクマ / FunTech - cf workers form matt rothenberg - threejs demo mrdoob - 3d scene, infinite embed Robin - curved surface Jake Archibald - html room Sawyer Hood - wormhole sirxemic - jelly slider Iwo Plaza | TypeGPU - several samples by Nick Daniel Try it out -

can't wait for html-in-canvas? you don't have to, it works now in all browsers internet is going to be lit in a few years here are all the best html rendering in canvas demos made in the last month - frozen form ハシモトタクマ / FunTech - cf workers form matt rothenberg - threejs demo mrdoob - 3d scene, infinite embed Robin - curved surface Jake Archibald - html room Sawyer Hood - wormhole sirxemic - jelly slider Iwo Plaza | TypeGPU - several samples by Nick Daniel Try it out -

Palash Bansal

29,863 views • 2 months ago

I made a plugin that turns figma designs to code using Claude AI Works with HTML, CSS, Tailwind, SwiftUI, Flutter, etc. This is production level code and you can enter custom prompts like "make it functional" or "add hover states". Oh and it's free. You can use your api keys.

I made a plugin that turns figma designs to code using Claude AI Works with HTML, CSS, Tailwind, SwiftUI, Flutter, etc. This is production level code and you can enter custom prompts like "make it functional" or "add hover states". Oh and it's free. You can use your api keys.

Meng To

220,706 views • 1 year ago

VFX-JS supports HTML-in-Canvas now. You can turn HTML element into a WebGL texture. It automatically detects the browser and fallback to the old SVG foreignObject workaround. So it works on Chrome, Firefox, and Safari, of course! #WebGL #VFXJS #Codepen

VFX-JS supports HTML-in-Canvas now. You can turn HTML element into a WebGL texture. It automatically detects the browser and fallback to the old SVG foreignObject workaround. So it works on Chrome, Firefox, and Safari, of course! #WebGL #VFXJS #Codepen

𝘼𝙈𝘼𝙂𝙄

52,300 views • 2 months ago

A visual comparison of HTML-in-Canvas vs rasterizing DOM to a canvas texture (side-by-side below, compare average capture times) Existing approaches to pull web content into canvas are slow and lossy: - Animations glitch, or don't play at all - CSS replication is imprecise - Clogs up the main thread, other animations lag HTML-in-Canvas (texElementImage2D) lets the browser's own compositor map CSS layouts, animations, and transitions precisely into canvas/WebGL textures — one native call instead of thousands of JS style reads. It's currently available behind an experimental Chrome flag. Really cool, and I can't wait for it to become mainstream.

A visual comparison of HTML-in-Canvas vs rasterizing DOM to a canvas texture (side-by-side below, compare average capture times) Existing approaches to pull web content into canvas are slow and lossy: - Animations glitch, or don't play at all - CSS replication is imprecise - Clogs up the main thread, other animations lag HTML-in-Canvas (texElementImage2D) lets the browser's own compositor map CSS layouts, animations, and transitions precisely into canvas/WebGL textures — one native call instead of thousands of JS style reads. It's currently available behind an experimental Chrome flag. Really cool, and I can't wait for it to become mainstream.

Robin

46,497 views • 2 months ago

Responsive HTML table with sticky columns and mobile view created using only CSS and HTML ✨ CodePen link below 👇

Responsive HTML table with sticky columns and mobile view created using only CSS and HTML ✨ CodePen link below 👇

Viki ✨

385,899 views • 2 years ago

I asked Claude 4 Sonnet to build Flappy Bird. It took longer to screen record than for it to code it. it literally one shot this in pure HTML, CSS, JS

I asked Claude 4 Sonnet to build Flappy Bird. It took longer to screen record than for it to code it. it literally one shot this in pure HTML, CSS, JS

Lisan al Gaib

48,923 views • 1 year ago

Prompt: Make a game like flappy bird using HTML/CSS/JS in a single HTML file

Prompt: Make a game like flappy bird using HTML/CSS/JS in a single HTML file

Diego | AI 🚀 - e/acc

145,468 views • 7 months ago

I wrote a Cursor Figma MCP server to make it easier for AI copilots to implement designs. It's not perfect, but the resulting HTML and CSS is a lot cleaner than giving AI a screenshot and having it guess. Link in the replies, take it for a spin and let me know what you think!

I wrote a Cursor Figma MCP server to make it easier for AI copilots to implement designs. It's not perfect, but the resulting HTML and CSS is a lot cleaner than giving AI a screenshot and having it guess. Link in the replies, take it for a spin and let me know what you think!

Graham Lipsman

102,535 views • 1 year ago

Prompt: Create a rocket launch animation starting with engine ignition and heavy smoke, followed by a slow liftoff that accelerates, using HTML/CSS/JS in a single HTML file.

Prompt: Create a rocket launch animation starting with engine ignition and heavy smoke, followed by a slow liftoff that accelerates, using HTML/CSS/JS in a single HTML file.

Diego | AI 🚀 - e/acc

212,111 views • 6 months ago

My favorite way of interacting with Claude Code is to have it generate static HTML files as outputs (reports, explorations, code structure, mockups etc.) I wanted to iterate on the file by commenting in browser and having Claude update the output live. So, I built this Claude Skill👇 How it works: - Install Claude Code skill (ask it to clone repo) - Build an HTML page for anything (e.g. research coding agents and generate HTML report) - Ask it to make the page interactive That's it. CC will launch a localhost server and allow you to then leave comments on the page itself and once it updates, will give you a tour of changes. It's like Google Docs kind of comments/iteration but for HTML pages.

My favorite way of interacting with Claude Code is to have it generate static HTML files as outputs (reports, explorations, code structure, mockups etc.) I wanted to iterate on the file by commenting in browser and having Claude update the output live. So, I built this Claude Skill👇 How it works: - Install Claude Code skill (ask it to clone repo) - Build an HTML page for anything (e.g. research coding agents and generate HTML report) - Ask it to make the page interactive That's it. CC will launch a localhost server and allow you to then leave comments on the page itself and once it updates, will give you a tour of changes. It's like Google Docs kind of comments/iteration but for HTML pages.

Paras Chopra

214,709 views • 1 month ago

Responsive login form with fun animation ✨ Using HTML, CSS and JS. CodePen link below 👇

Responsive login form with fun animation ✨ Using HTML, CSS and JS. CodePen link below 👇

Viki ✨

401,492 views • 2 years ago

Markdown was doomed from the start. It's just a format with low information density. HTML is better for humans, and agents can now consume and produce it without issues. But nobody wants to type HTML, so here is an alternative: This is an open-source tool for generating dashboards from data without writing a single HTML tag. You define your dashboard in YAML or TSK, and the tool will serve the HTML file for you. It comes with skills for Claude Code and Codex, so they know how to build these dashboards. And you can connect this to Postgres, MySQL, Snowflake, BigQuery, Redshift, Databricks, and many other databases. Repo link below.

Markdown was doomed from the start. It's just a format with low information density. HTML is better for humans, and agents can now consume and produce it without issues. But nobody wants to type HTML, so here is an alternative: This is an open-source tool for generating dashboards from data without writing a single HTML tag. You define your dashboard in YAML or TSK, and the tool will serve the HTML file for you. It comes with skills for Claude Code and Codex, so they know how to build these dashboards. And you can connect this to Postgres, MySQL, Snowflake, BigQuery, Redshift, Databricks, and many other databases. Repo link below.

Santiago

86,394 views • 1 month ago

Revamped my personal GitHub profile readme! 🎉 I’ve made a fully responsive website inside an SVG, loaded as an image, using HTML, inside markdown, inside a readme.md. Not only is it interactive and supports light/dark mode, but it also includes a fallback for Firefox😂#github

Terkel 𓀒

395,228 views • 2 years ago

I asked claude 3.7 sonnet to create a threejs simulation of evolved virtual creatures and here's what it did...

I asked claude 3.7 sonnet to create a threejs simulation of evolved virtual creatures and here's what it did...

itsgalo 🗯

26,392 views • 1 year ago

Struggling to make your UI stand out? CSSnippets – A collection of modern, reusable UI components! ✨Ready-to-use with HTML, CSS, React & Tailwind CSS ✨No frameworks, just pure CSS ✨Clean, minimal, and beautiful 🔗 Explore now: Save it for later! 🔖

Struggling to make your UI stand out? CSSnippets – A collection of modern, reusable UI components! ✨Ready-to-use with HTML, CSS, React & Tailwind CSS ✨No frameworks, just pure CSS ✨Clean, minimal, and beautiful 🔗 Explore now: Save it for later! 🔖

Shefali

22,953 views • 1 year ago

Prompt: Create an animation of a single flower blooming in a pot. Using HTML/CSS/JS in a single HTML file.

Prompt: Create an animation of a single flower blooming in a pot. Using HTML/CSS/JS in a single HTML file.

Diego | AI 🚀 - e/acc

114,362 views • 6 months ago