Shader Atlas
한국어
◌ Blurs

Angular Blur

회전형 블러

An angular blur smears image detail around a chosen center point.

Also known as: AngularBlurrotational blur

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

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/still.jpg" />
      <AngularBlur />
    </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, AngularBlur, ImageTexture } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/still.jpg"/>
    <AngularBlur/>
  </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, AngularBlur, ImageTexture } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/still.jpg" />
  <AngularBlur />
</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, AngularBlur, ImageTexture } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/still.jpg" />
      <AngularBlur />
    </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: 'AngularBlur',
    }
  ]
}, { disableTelemetry: true })

Props · AngularBlur

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

NameValueDefaultRange / optionsDescription
intensityBlur Intensity200 – 100 (step 1)Intensity of the angular blur effect
centerCenter Position
x0.5y0.5
{"x":0.5,"y":0.5}x, y: 0 – 1The center point of the rotation

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

Linear Blur방향성 블러

A directional blur stretches image detail along a chosen angle.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Zoom Blur줌 블러

A zoom blur pulls image details toward or away from a chosen center.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Blur가우시안 블러

A uniform Gaussian blur softens edges and fine detail across the image.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Progressive Blur점진적 블러

Blur strength changes gradually across the image in one direction.

It leaves curved trails around a point, like a wheel captured with a long exposure. The image appears to turn around that point.

`intensity` defaults to 20 and ranges from 0 to 100; raising it strengthens the rotational trail. `center` defaults to {x: 0.5, y: 0.5} and moves the pivot.

Apply it over an image or video and align the center with the intended rotation axis. It can make the whole frame harder to read, so keep it to a short accent or background and exclude small, important text.

When to use

Use it for trails behind rotating objects, a rotational transition, or a background that emphasizes a circular axis. Avoid it on documents or dashboards that need sustained reading.

Open as page ↗