레이어 순서

// WebGPU 를 지원하는 브라우저에서만 그립니다.
import {
  Shader,
  Blur,
  Circle,
  MeshGradient,
  Ring,
} from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <MeshGradient
        speed={0.4} />
      <Circle
        center={{
          x: 0.38,
          y: 0.5
        }}
        color="#f8fafc"
        radius={0.22} />
      <Blur
        intensity={30} />
      <Ring
        center={{
          x: 0.64,
          y: 0.5
        }}
        color="#22d3ee" />
    </Shader>
  )
}

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script setup lang="ts">
import {
  Shader,
  Blur,
  Circle,
  MeshGradient,
  Ring
} from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <MeshGradient
      :speed="0.4"/>
    <Circle
      :center="{
        x: 0.38,
        y: 0.5
      }"
      color="#f8fafc"
      :radius="0.22"/>
    <Blur
      :intensity="30"/>
    <Ring
      :center="{
        x: 0.64,
        y: 0.5
      }"
      color="#22d3ee"/>
  </Shader>
</template>

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script>
  import {
    Shader,
    Blur,
    Circle,
    MeshGradient,
    Ring,
  } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <MeshGradient
    speed={0.4} />
  <Circle
    center={{
      x: 0.38,
      y: 0.5
    }}
    color="#f8fafc"
    radius={0.22} />
  <Blur
    intensity={30} />
  <Ring
    center={{
      x: 0.64,
      y: 0.5
    }}
    color="#22d3ee" />
</Shader>

// WebGPU 를 지원하는 브라우저에서만 그립니다.
import {
  Shader,
  Blur,
  Circle,
  MeshGradient,
  Ring,
} from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <MeshGradient
        speed={0.4} />
      <Circle
        center={{
          x: 0.38,
          y: 0.5
        }}
        color="#f8fafc"
        radius={0.22} />
      <Blur
        intensity={30} />
      <Ring
        center={{
          x: 0.64,
          y: 0.5
        }}
        color="#22d3ee" />
    </Shader>
  )
}

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// <canvas id="canvas" style="width:100%;height:320px"></canvas> 가 페이지에 있어야 한다
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'MeshGradient',
      props: {
        speed: 0.4,
      },
    },
    {
      type: 'Circle',
      props: {
        center: {
          x: 0.38,
          y: 0.5
        },
        color: '#f8fafc',
        radius: 0.22,
      },
    },
    {
      type: 'Blur',
      props: {
        intensity: 30,
      },
    },
    {
      type: 'Ring',
      props: {
        center: {
          x: 0.64,
          y: 0.5
        },
        color: '#22d3ee',
      },
    }
  ]
}, { disableTelemetry: true })