Shader Atlas
한국어
≈ Distortions

Bend

곡면 휨

The frame curves toward or away from the viewer, changing the apparent depth at its edges.

Also known as: BendCurved display

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

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

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

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

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

Props · Bend

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

NameValueDefaultRange / optionsDescription
strengthStrength0.5-1 – 1 (step 0.01)How hard the ends bend — positive curls them toward you (edges magnify), negative curls them away (edges recede into the frame)
falloffFalloff00 – 1 (step 0.01)Concentrates the bend toward the ends — 0 curves the whole frame, higher keeps the middle flat and bends only near the edges
angleAngle00 – 360 (step 1)Direction of the bend axis in degrees — 0 bends the left/right ends, 90 bends the top/bottom
edgesEdgestransparentstretch · transparent · mirror · wrapHow to handle edges when the bend pulls content away from the frame border

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

Perspective원근 변형

A flat image tilts in 3D, with perspective changing the apparent size of its near and far sides.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Corner Pin코너 핀

Each corner moves independently, warping the image to fit a skewed plane.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Surface 3 D3D 파동 표면

The input drapes over a lit 3D wave surface with visible depth and perspective.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Stretch방향성 늘이기

Content pulls and elongates away from a center in a chosen direction.

It makes a flat frame feel like a gently curved display: the ends swell toward the viewer or curl back into the frame.

Raise `strength` to bend the ends toward the viewer; negative values curl them away. Raise `falloff` to keep the middle flatter and concentrate the bend near the edges, and change `angle` to turn the bend axis. `edges` controls the area beyond the frame.

Apply it above an image or background layer. Pair it with `Perspective` when you want to control tilt and curvature separately, and keep important copy on a separate layer for readability.

When to use

Use it for curved-display hero visuals, edge emphasis, and bending transitions. Avoid it for long copy or interfaces that depend on straight alignment.

Open as page ↗