正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

I can't believe it, I've managed to create a HTML-in-Canvas beast with Ultramock 🔥 Load up any website/app into an interactive 3D scene and programatically animate all components beautifully:

Josh Millgate

5,979 subscribers

22,337 次观看 • 3 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

I can't code and I'm not a designer. But I managed to create this cool, interactive website with Figma's new prompt-to-code tool. Lessons learned from my explorations in "vibe designing" 👇

I can't code and I'm not a designer. But I managed to create this cool, interactive website with Figma's new prompt-to-code tool. Lessons learned from my explorations in "vibe designing" 👇

Justine Moore

176,628 次观看 • 1 年前

Flick quietly built an agent-powered 3D tool into their app. You can block out a scene, animate it, set your own camera move, and go straight to video from there. No 3D background required. First time i've seen this done well honestly Flick

Flick quietly built an agent-powered 3D tool into their app. You can block out a scene, animate it, set your own camera move, and go straight to video from there. No 3D background required. First time i've seen this done well honestly Flick

Nawal

13,408 次观看 • 1 个月前

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,582 次观看 • 4 个月前

I converted all my best HTML templates into full React sites and it’s 100% working. Can't believe I vibe-coded this tool. You can turn any html to react with full design & code edit features, unicorn studio and font assets.

I converted all my best HTML templates into full React sites and it’s 100% working. Can't believe I vibe-coded this tool. You can turn any html to react with full design & code edit features, unicorn studio and font assets.

Meng To

36,016 次观看 • 5 个月前

I've always liked the infinite canvas as an exploration medium, but I could never get into Figma because I'm faster at designing in code So this weekend I made an app that combines canvas with code editor - write React, and it appears in the canvas

I've always liked the infinite canvas as an exploration medium, but I could never get into Figma because I'm faster at designing in code So this weekend I made an app that combines canvas with code editor - write React, and it appears in the canvas

nanda

79,813 次观看 • 4 个月前

$Google has solved a 20-year-old web problem.. It's called html-in-canvas, a new experimental Chrome feature that renders live HTML directly as a 3D texture. here's what it does: → draws any DOM element (dashboards, forms, entire app UIs) straight into a canvas → full CSS still works, flexbox, grid, shadows, backdrop-filter, animations → text stays selectable, inputs stay typeable, screen readers still see it → auto syncs with your DOM on every paint → pipes into any WebGL shader → distort, curl, refract, warp the wildest part: someone already built an html-cloth plugin that turns your live UI into simulated fabric.$

Google has solved a 20-year-old web problem.. It's called html-in-canvas, a new experimental Chrome feature that renders live HTML directly as a 3D texture. here's what it does: → draws any DOM element (dashboards, forms, entire app UIs) straight into a canvas → full CSS still works, flexbox, grid, shadows, backdrop-filter, animations → text stays selectable, inputs stay typeable, screen readers still see it → auto syncs with your DOM on every paint → pipes into any WebGL shader → distort, curl, refract, warp the wildest part: someone already built an html-cloth plugin that turns your live UI into simulated fabric.

How To Prompt

235,877 次观看 • 1 个月前

Claude Fable 5 built a 3D product website with Claude Code Generate an image of a product with the Magnific MCP, and convert it into a 3D model. Download that model and give it to Fable 5 to develop an interactive page with. Here's the final result + prompts:

Claude Fable 5 built a 3D product website with Claude Code Generate an image of a product with the Magnific MCP, and convert it into a 3D model. Download that model and give it to Fable 5 to develop an interactive page with. Here's the final result + prompts:

Jerrod Lew

33,687 次观看 • 2 个月前

Here's finally the full website redesign I've been working on for GOBELINS Paris! All of the UI was designed & prototyped individually in Figma, and then I used Jitter to merge them into this seamless scroll video. I also used Spline to create & animate the 3d parts

Here's finally the full website redesign I've been working on for GOBELINS Paris! All of the UI was designed & prototyped individually in Figma, and then I used Jitter to merge them into this seamless scroll video. I also used Spline to create & animate the 3d parts

Emisho

15,141 次观看 • 1 年前

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,986 次观看 • 4 个月前

I've been playing around with Chrome's experimental HTML-in-Canvas API (I use it to create my videos), and I wanted to see if I could make text-selection work on a curved surface by moving the underlying element around on pointermove. It works pretty well!

I've been playing around with Chrome's experimental HTML-in-Canvas API (I use it to create my videos), and I wanted to see if I could make text-selection work on a curved surface by moving the underlying element around on pointermove. It works pretty well!

Jake Archibald

117,944 次观看 • 5 个月前

omg.. world's first text to 3D video AI is here Rendora AI now can create 3D avatar, put in any 3D scene, use any camera angle, make them talk with expression & body movement and.. customise the face, outfit and animate without rigging step by step tutorial:

el.cine

268,641 次观看 • 1 年前

Introducing Kanvas a visual workspace to think, plan, and build ideas on a single canvas Built using the html canvas api >Collaborate in real time >Create freely or stay structured >Design with AI help >Privacy Kanvas is simple, visual, and powerful , with AI built right into the canvas link in comment

Introducing Kanvas a visual workspace to think, plan, and build ideas on a single canvas Built using the html canvas api >Collaborate in real time >Create freely or stay structured >Design with AI help >Privacy Kanvas is simple, visual, and powerful , with AI built right into the canvas link in comment

deep

17,688 次观看 • 7 个月前

Been pushing Rive's new 3D and shader support to see what's possible 🚀 Using AI + scripting, I was able to: • Import 3D models • Generate cameras and lights • Create custom shaders (wireframe, AO, sketch, toon) • Build materials • Project animated textures onto 3D geometry • Place 2D components directly in 3D space It's pretty wild to see how quickly Rive is evolving into a true all-in-one platform for interactive design.

Been pushing Rive's new 3D and shader support to see what's possible 🚀 Using AI + scripting, I was able to: • Import 3D models • Generate cameras and lights • Create custom shaders (wireframe, AO, sketch, toon) • Build materials • Project animated textures onto 3D geometry • Place 2D components directly in 3D space It's pretty wild to see how quickly Rive is evolving into a true all-in-one platform for interactive design.

Sanu Sagar

18,218 次观看 • 2 个月前

HTML can't run Doom But HTML can now run *inside* Doom! Thanks to HTML-in-Canvas! Fully accessible DOM elements drawn into Doom's own wall textures. This demo uses a WebAssembly port (jacobenget/doom.wasm) of the original C source. See it in action at - Requires Chrome with chrome://flags/#canvas-draw-element enabled. On every Doom tick, HTML-in-Canvas's drawElementImage() captures the DOM form (child of ) to an offscreen buffer, it's quantised to Doom's 256-colour palette, and the bytes are written straight into the cached patch for the appropriate texture in Doom. Doom's own software renderer then paints it onto E1M1 as a wall texture - which means perspective warp, sector lighting, and even the damage-red tint all get included and applied to the HTML form elements. It's just a texture to Doom.

HTML can't run Doom But HTML can now run inside Doom! Thanks to HTML-in-Canvas! Fully accessible DOM elements drawn into Doom's own wall textures. This demo uses a WebAssembly port (jacobenget/doom.wasm) of the original C source. See it in action at - Requires Chrome with chrome://flags/#canvas-draw-element enabled. On every Doom tick, HTML-in-Canvas's drawElementImage() captures the DOM form (child of ) to an offscreen buffer, it's quantised to Doom's 256-colour palette, and the bytes are written straight into the cached patch for the appropriate texture in Doom. Doom's own software renderer then paints it onto E1M1 as a wall texture - which means perspective warp, sector lighting, and even the damage-red tint all get included and applied to the HTML form elements. It's just a texture to Doom.

Robin

115,180 次观看 • 4 个月前

🌐 Incredibly happy to share Project Genie with the world. We announced Genie 3 in August, and since then the team worked hard to make it available to more people. Starting today, Project Genie is available to all Ultra subscribers in the US. Create an interactive world from any text prompt or image, tweak it and walk into the world you just created! Can't wait to see what you create with it 🚀🧞

🌐 Incredibly happy to share Project Genie with the world. We announced Genie 3 in August, and since then the team worked hard to make it available to more people. Starting today, Project Genie is available to all Ultra subscribers in the US. Create an interactive world from any text prompt or image, tweak it and walk into the world you just created! Can't wait to see what you create with it 🚀🧞

Shlomi Fruchter

34,622 次观看 • 7 个月前

3D extrusion shader in Figma. Draw content inside a frame with the shader applied and it'll be transformed into 3D live as you're drawing. Stack with other shaders and animate to create 3D animations. Clone this file to grab the shader!

3D extrusion shader in Figma. Draw content inside a frame with the shader applied and it'll be transformed into 3D live as you're drawing. Stack with other shaders and animate to create 3D animations. Clone this file to grab the shader!

Piers Cowburn

47,160 次观看 • 2 个月前

HTML canvas has always been a black box to the browser, but not anymore. The HTML-in-Canvas API lets you integrate real DOM elements directly into the canvas, making them fully searchable, accessible, natively translatable, and inspectable. Fuse shaders and semantics to build new UI, eliminating the need for separate DOM overlays → The web is about to get a whole lot more whimsical and we can't wait to see it 🎨

HTML canvas has always been a black box to the browser, but not anymore. The HTML-in-Canvas API lets you integrate real DOM elements directly into the canvas, making them fully searchable, accessible, natively translatable, and inspectable. Fuse shaders and semantics to build new UI, eliminating the need for separate DOM overlays → The web is about to get a whole lot more whimsical and we can't wait to see it 🎨

Chrome for Developers

41,646 次观看 • 2 个月前

I've made some fun experiments with animated 3D text rendered in HTML! CodePen.IO. I plan to turn this into a handy little library to help make these kind of effects easier. These are animated with GSAP.

I've made some fun experiments with animated 3D text rendered in HTML! CodePen.IO. I plan to turn this into a handy little library to help make these kind of effects easier. These are animated with GSAP.

Steve Gardner

44,915 次观看 • 3 年前