A narrow focus band stays sharp while areas beyond it become progressively blurred.
Also known as: TiltShiftselective focus blurminiature effect
Moves in browsers that support WebGPU
This device could not render the demo — showing a still
Code reflects the control values
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, TiltShift } from 'shaders/react'
export default function ShaderEffect() {
return (
<Shader style={{ width: '100%', height: 320 }} disableTelemetry>
<ImageTexture
objectFit="cover"
url="/samples/photo.jpg" />
<TiltShift />
</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, TiltShift } from 'shaders/vue'
</script>
<template>
<Shader style="width: 100%; height: 320px" :disable-telemetry="true">
<ImageTexture
object-fit="cover"
url="/samples/photo.jpg"/>
<TiltShift/>
</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, TiltShift } from 'shaders/svelte'
</script>
<Shader style="width: 100%; height: 320px" disableTelemetry>
<ImageTexture
objectFit="cover"
url="/samples/photo.jpg" />
<TiltShift />
</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, TiltShift } from 'shaders/solid'
export default function ShaderEffect() {
return (
<Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
<ImageTexture
objectFit="cover"
url="/samples/photo.jpg" />
<TiltShift />
</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/photo.jpg',
},
},
{
type: 'TiltShift',
}
]
}, { disableTelemetry: true })
Props · TiltShift
Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).
Name
Value
Default
Range / options
Description
intensityIntensity
50
0 – 100 (step 1)
Maximum blur intensity at edges
widthWidth
0.3
0 – 1 (step 0.1)
Width of the sharp focus area
falloffFalloff
0.3
0 – 1 (step 0.1)
Distance over which blur transitions to full strength
angleAngle
0
0 – 360 (step 1)
Rotation angle of the focus line (in degrees)
centerCenter
xy
{"x":0.5,"y":0.5}
x, y: 0 – 1
Center point of the focus line
Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id
It leaves a sharp band across the scene and blurs areas outside it, suggesting a shallow depth of field. A wide scene can also look like a small, detailed model.
`intensity` defaults to 50 and ranges from 0 to 100 for maximum edge blur. `width` defaults to 0.3 and ranges from 0 to 1 for the sharp area width. `falloff` defaults to 0.3 and ranges from 0 to 1 for the transition width. `angle` defaults to 0 degrees and ranges from 0 to 360 degrees; `center` defaults to {x: 0.5, y: 0.5} and moves the focus line.
Place it over a photo or video and keep the subject inside the sharp band. A band that is too narrow or crosses text at an awkward angle can make the frame feel artificial and hard to read.
When to use
Use it to make a wide scene feel miniature, direct attention to a subject, or emphasize a photo's focus area. Avoid it when small text and detail across the whole frame matter.
