Radial Wipe

방사형 와이프

A clock-hand sweep rotates around a center and removes the input.

Also known as: RadialWiperadial wipe

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React

// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
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

<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<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

<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<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

// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
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

// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
// 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: '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`

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

Name	Value	Default	Range / options	Description
`progress`Progress	0.5Auto-animated in the demo — moving it pins the value	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

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

It sweeps around a circle like a clock hand clearing the frame. The rhythm fits a circular timer or a dial filling up.

`progress` defaults to 0.5 and ranges from 0 to 1 for the amount removed. `startAngle` defaults to 0 degrees and ranges from 0 to 360 degrees for the starting point; `direction` defaults to cw and selects the sweep direction. `center` defaults to {x: 0.5, y: 0.5}, and `feather` defaults to 0.1 and ranges from 0 to 1 for edge softness.

Put the image or video input beneath the effect. To change scenes, put the incoming scene below it and animate progress. Position the center so the sweep does not cut across a face or copy at an awkward point.

When to use

Use it for circular progress, a clock-like scene wipe, or an intro that starts at the center. Avoid it when a straight direction matters or small text must travel along the edge.

Props · RadialWipe

Related

Iris Wipe아이리스 와이프

Ripple Wipe물결 와이프

Linear Wipe선형 와이프

Diamond Wipe다이아몬드 와이프

When to use

Props · `RadialWipe`