Dot Grid

// Renders only in browsers with WebGPU.
import { Shader, DotGrid } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <DotGrid
        speed={0.5}
        twinkle={0.5} />
    </Shader>
  )
}

<!-- Renders only in browsers with WebGPU. -->
<script setup lang="ts">
import { Shader, DotGrid } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <DotGrid
      :speed="0.5"
      :twinkle="0.5"/>
  </Shader>
</template>

<!-- Renders only in browsers with WebGPU. -->
<script>
  import { Shader, DotGrid } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <DotGrid
    speed={0.5}
    twinkle={0.5} />
</Shader>

// Renders only in browsers with WebGPU.
import { Shader, DotGrid } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <DotGrid
        speed={0.5}
        twinkle={0.5} />
    </Shader>
  )
}

// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'DotGrid',
      props: {
        speed: 0.5,
        twinkle: 0.5,
      },
    }
  ]
}, { disableTelemetry: true })