방사형 와이프

Radial Wipe

시계 바늘처럼 중심을 돌아가는 부채꼴 경계가 입력 화면을 지웁니다.

다른 이름: RadialWiperadial wipe

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

React

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

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/still.jpg" />
      <RadialWipe
        progress={{
          type: "auto-animate",
          mode: "ping-pong",
          outputMin: 0,
          outputMax: 1,
          speed: 0.5
        }}>
        <ImageTexture
          objectFit="cover"
          url="/samples/photo.jpg" />
      </RadialWipe>
    </Shader>
  )
}

Vue

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

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/still.jpg"/>
    <RadialWipe
      :progress="{
        type: 'auto-animate',
        mode: 'ping-pong',
        outputMin: 0,
        outputMax: 1,
        speed: 0.5
      }">
      <ImageTexture
        object-fit="cover"
        url="/samples/photo.jpg"/>
    </RadialWipe>
  </Shader>
</template>

Svelte

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

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/still.jpg" />
  <RadialWipe
    progress={{
      type: "auto-animate",
      mode: "ping-pong",
      outputMin: 0,
      outputMax: 1,
      speed: 0.5
    }}>
    <ImageTexture
      objectFit="cover"
      url="/samples/photo.jpg" />
  </RadialWipe>
</Shader>

Solid

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

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/still.jpg" />
      <RadialWipe
        progress={{
          type: "auto-animate",
          mode: "ping-pong",
          outputMin: 0,
          outputMax: 1,
          speed: 0.5
        }}>
        <ImageTexture
          objectFit="cover"
          url="/samples/photo.jpg" />
      </RadialWipe>
    </Shader>
  )
}

JavaScript

// 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: 'ImageTexture',
      props: {
        objectFit: 'cover',
        url: '/samples/still.jpg',
      },
    },
    {
      type: 'RadialWipe',
      props: {
        progress: {
          type: 'auto-animate',
          mode: 'ping-pong',
          outputMin: 0,
          outputMax: 1,
          speed: 0.5
        },
      },
      children: [
        {
          type: 'ImageTexture',
          props: {
            objectFit: 'cover',
            url: '/samples/photo.jpg',
          },
        },
      ],
    }
  ]
}, { disableTelemetry: true })

속성(props) · `RadialWipe`

값을 바꾸면 위 데모와 코드 탭에 바로 반영됩니다. 설명은 라이브러리 레지스트리의 영어 원문(MIT)입니다.

이름	값	기본값	범위·선택지	설명(원문)
`progress`Progress	0.5데모에서 자동으로 오가는 값 — 움직이면 그 값에 고정됩니다	0.5	0 – 1 (step 0.01)	How far the sweep has travelled (0 = fully visible, 1 = fully wiped away)
`startAngle`Start Angle	0	0	0 – 360 (step 1)	Angle in degrees where the sweep begins
`direction`Direction		cw	cw · ccw · both	Which way the sweep rotates
`center`Center	x0.5y0.5	{"x":0.5,"y":0.5}	x, y: 0 – 1	Point the sweep rotates around
`feather`Feather	0.1	0.1	0 – 1 (step 0.01)	Softness of the sweeping edge
`invert`Invert		false	—	Reverse which side of the sweep is wiped

모든 컴포넌트 공통: blendMode · opacity · visible · maskSource/maskType · boundingBox · id

시계 바늘이 원을 훑으며 화면을 걷어내는 모습입니다. 원형 타이머나 다이얼이 채워지는 리듬과 잘 맞습니다.

`progress`는 기본 0.5, 범위 0–1이며 지워진 진행 정도입니다. `startAngle`은 기본 0도, 범위 0–360도에서 시작 위치를 정하고, `direction`은 기본 cw로 회전 방향을 고릅니다. `center`는 기본 {x: 0.5, y: 0.5}, `feather`는 기본 0.1, 범위 0–1로 경계의 부드러움을 정합니다.

입력 이미지나 영상을 효과 아래에 놓으세요. 다른 장면으로 바꾸려면 새 장면을 아래에 두고 progress를 애니메이션하세요. 중심이 대상의 얼굴이나 문구 위를 가로지르지 않도록 위치를 맞추면 읽기 쉽습니다.

언제 쓰나

원형 진행 표시, 시계 방향으로 닦이는 장면 전환, 중앙에서 시작하는 인트로에 좋습니다. 직선 방향이 중요한 화면이나 작은 글자가 경계를 따라 움직여야 하는 경우에는 피하세요.

속성(props) · RadialWipe

함께 보기

아이리스 와이프Iris Wipe

물결 와이프Ripple Wipe

선형 와이프Linear Wipe

다이아몬드 와이프Diamond Wipe

언제 쓰나

속성(props) · `RadialWipe`