Shader Atlas
한국어
⇥ Transitions

Venetian Blinds

베네치안 블라인드 와이프

Parallel strips close across the frame to wipe the input away.

Also known as: VenetianBlindsblinds transition

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, VenetianBlinds } from 'shaders/react'

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

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

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/still.jpg" />
  <VenetianBlinds
    progress={{
      type: "auto-animate",
      mode: "ping-pong",
      outputMin: 0,
      outputMax: 1,
      speed: 0.5
    }}>
    <ImageTexture
      objectFit="cover"
      url="/samples/photo.jpg" />
  </VenetianBlinds>
</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, VenetianBlinds } from 'shaders/solid'

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

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

NameValueDefaultRange / optionsDescription
progressProgressAuto-animated in the demo — moving it pins the value0.50 – 1 (step 0.01)How far the blinds have closed (0 = fully visible, 1 = fully wiped away)
angleAngle00 – 360 (step 1)Orientation of the strips in degrees
stripCountStrips52 – 60 (step 1)Number of strips across the frame
featherFeather0.150 – 1 (step 0.01)Softness of each closing strip edge
invertInvertfalse—Close each strip from the opposite edge

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

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Barn Doors양방향 와이프

Two halves split at the center and move outward like opening doors.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Slice Wipe슬라이스 와이프

Alternating strips slide away to remove the image in slices.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Random Bars랜덤 바 와이프

Parallel bars disappear in a varying order as progress advances.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Linear Wipe선형 와이프

A soft straight edge moves across the input and gradually wipes it away.

Parallel strips cover the frame like blinds closing over a window. Their even spacing gives the transition a regular feel.

`progress` defaults to 0.5 and ranges from 0 to 1. `angle` defaults to 0 degrees and ranges from 0 to 360 degrees to rotate the strips. `stripCount` defaults to 5 and ranges from 2 to 60 for the strip count; `feather` defaults to 0.15 and ranges from 0 to 1 for edge softness. `invert` defaults to false and closes each strip from the opposite edge.

Place an image or video beneath the effect. Add an incoming scene on a lower layer and animate progress. More strips create a denser pattern that can break up text and faces, so use it on backgrounds or short cuts.

When to use

Use it for scene changes with regular stripes, a blinds-like intro, or a graphic background transition. Avoid it when faces and small text must remain intact between strips.

Open as page ↗