마스킹

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요.
import { Shader, Circle, ImageTexture } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <Circle
        id="reveal"
        radius={{
          type: "auto-animate",
          mode: "ping-pong",
          outputMin: 0.25,
          outputMax: 0.6,
          speed: 0.5
        }}
        softness={0.2}
        visible={false} />
      <ImageTexture
        maskSource="reveal"
        objectFit="cover"
        url="/samples/photo.jpg" />
    </Shader>
  )
}

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<!-- /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요. -->
<script setup lang="ts">
import { Shader, Circle, ImageTexture } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <Circle
      id="reveal"
      :radius="{
        type: 'auto-animate',
        mode: 'ping-pong',
        outputMin: 0.25,
        outputMax: 0.6,
        speed: 0.5
      }"
      :softness="0.2"
      :visible="false"/>
    <ImageTexture
      mask-source="reveal"
      object-fit="cover"
      url="/samples/photo.jpg"/>
  </Shader>
</template>

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<!-- /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요. -->
<script>
  import { Shader, Circle, ImageTexture } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <Circle
    id="reveal"
    radius={{
      type: "auto-animate",
      mode: "ping-pong",
      outputMin: 0.25,
      outputMax: 0.6,
      speed: 0.5
    }}
    softness={0.2}
    visible={false} />
  <ImageTexture
    maskSource="reveal"
    objectFit="cover"
    url="/samples/photo.jpg" />
</Shader>

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요.
import { Shader, Circle, ImageTexture } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <Circle
        id="reveal"
        radius={{
          type: "auto-animate",
          mode: "ping-pong",
          outputMin: 0.25,
          outputMax: 0.6,
          speed: 0.5
        }}
        softness={0.2}
        visible={false} />
      <ImageTexture
        maskSource="reveal"
        objectFit="cover"
        url="/samples/photo.jpg" />
    </Shader>
  )
}

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요.
// <canvas id="canvas" style="width:100%;height:320px"></canvas> 가 페이지에 있어야 한다
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'Circle',
      id: 'reveal',
      props: {
        radius: {
          type: 'auto-animate',
          mode: 'ping-pong',
          outputMin: 0.25,
          outputMax: 0.6,
          speed: 0.5
        },
        softness: 0.2,
        visible: false,
      },
    },
    {
      type: 'ImageTexture',
      props: {
        maskSource: 'reveal',
        objectFit: 'cover',
        url: '/samples/photo.jpg',
      },
    }
  ]
}, { disableTelemetry: true })