DOMTexture

Render live HTML/DOM content as a WebGPU texture layer via the html-in-canvas API. Requires Chrome Canary with chrome://flags/#canvas-draw-element enabled.

⚠

Experimental Component

This component is powered by the WICG html-in-canvas proposal, which is currently only available in Chrome Canary behind a feature flag. It is not suitable for production use and may change as the specification evolves.

View the spec →

Usage

<Shader>
  <DOMTexture />
</Shader>

<Shader>
  <DOMTexture />
</Shader>

<Shader>
  <DOMTexture />
</Shader>

<Shader>
  <DOMTexture />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'DOMTexture', props: {} }
  ]
})

CursorTrail

DiamondGradient

Documentation

DOMTexture

Usage