Lens Distortion

Presets

Installation

npm i @paper-design/shaders-react

Code

import { LensDistortion } from '@paper-design/shaders-react';

<LensDistortion
  spread={0.15}
  angle={28}
  perspective={1}
  count={50}
  dispersionColor={0.75}
  focusCenter={0.5}
  focusEdges={0}
  swirl={0}
  lensBulge={0.1}
>
  <div
    className="demo"
    data-recording="on"
    ref={(element) => {
      const timecode = element.querySelector('time');
      let frames = 0;
      const interval = setInterval(() => {
        if (element.dataset.recording === 'off') return;
        frames += 1;
        const parts = [frames / 86400, (frames / 1440) % 60, (frames / 24) % 60, frames % 24];
        timecode.textContent = parts.map((part) => String(Math.floor(part)).padStart(2, '0')).join(':');
      }, 1000 / 24);
      return () => clearInterval(interval);
    }}
    onPointerDown={(event) => {
      if (event.target.closest('button')) return;
      const demo = event.currentTarget;
      const bounds = demo.getBoundingClientRect();
      demo.dataset.x = String(((event.clientX - bounds.left) / bounds.width) * 100);
      demo.dataset.y = String(((event.clientY - bounds.top) / bounds.height) * 100);
      delete demo.dataset.dragged;
      demo.setPointerCapture(event.pointerId);
    }}
    onPointerMove={(event) => {
      const demo = event.currentTarget;
      if (demo.dataset.x === undefined) return;
      const bounds = demo.getBoundingClientRect();
      const [startX, startY] = [Number(demo.dataset.x), Number(demo.dataset.y)];
      const x = ((event.clientX - bounds.left) / bounds.width) * 100;
      const y = ((event.clientY - bounds.top) / bounds.height) * 100;
      if (!demo.dataset.dragged && Math.hypot(x - startX, y - startY) < 2) return;
      demo.dataset.dragged = 'true';
      demo.style.setProperty('--x', `${(x + startX) / 2}%`);
      demo.style.setProperty('--y', `${(y + startY) / 2}%`);
      demo.style.setProperty('--w', `${Math.abs(x - startX)}%`);
      demo.style.setProperty('--h', `${Math.abs(y - startY)}%`);
      demo.querySelector('.focus span').textContent = 'track';
    }}
    onPointerUp={(event) => {
      const demo = event.currentTarget;
      if (demo.dataset.x === undefined) return;
      const focus = demo.querySelector('.focus');
      if (demo.dataset.dragged) {
        focus.animate([{ opacity: 0 }, { opacity: 1 }, { opacity: 0 }, { opacity: 1 }], 300);
      } else {
        demo.style.setProperty('--x', `${demo.dataset.x}%`);
        demo.style.setProperty('--y', `${demo.dataset.y}%`);
        demo.style.removeProperty('--w');
        demo.style.removeProperty('--h');
        focus.firstElementChild.textContent = 'af-s';
        focus.animate([{ scale: 1.4, opacity: 0 }, { scale: 1, opacity: 1 }], 250);
      }
      delete demo.dataset.x;
      delete demo.dataset.y;
    }}
    onPointerCancel={(event) => {
      const demo = event.currentTarget;
      if (demo.dataset.x === undefined) return;
      const focus = demo.querySelector('.focus');
      if (demo.dataset.dragged) {
        focus.animate([{ opacity: 0 }, { opacity: 1 }, { opacity: 0 }, { opacity: 1 }], 300);
      } else {
        demo.style.setProperty('--x', `${demo.dataset.x}%`);
        demo.style.setProperty('--y', `${demo.dataset.y}%`);
        demo.style.removeProperty('--w');
        demo.style.removeProperty('--h');
        focus.firstElementChild.textContent = 'af-s';
        focus.animate([{ scale: 1.4, opacity: 0 }, { scale: 1, opacity: 1 }], 250);
      }
      delete demo.dataset.x;
      delete demo.dataset.y;
    }}
  >
    <style>{`.demo { --x: 64%; --y: 45%; position: relative; height: 100%; container-type: inline-size; overflow: hidden; color: #f4f3ec; background: #121212; font: 1.8cqw 'Paper Mono', ui-monospace, monospace; text-transform: uppercase; user-select: none; touch-action: none; cursor: crosshair }
    .demo header, .demo footer { position: absolute; left: 11cqw; right: 11cqw; display: flex; align-items: center; gap: 1.5cqw }
    .demo header { top: 5cqw }
    .demo footer { bottom: 5cqw; justify-content: center }
    .demo header time { margin-right: auto; font-feature-settings: "tnum", "zero" }
    .demo .battery::before { content: ''; display: inline-block; width: 3.2cqw; height: 1.4cqw; margin-right: 1cqw; padding: 0.2cqw; border: 0.2cqw solid; border-radius: 0.3cqw; vertical-align: -0.2cqw; background: linear-gradient(90deg, currentColor 76%, transparent 0) content-box }
    .demo button { padding: 1cqw 1.6cqw; border: 0.15cqw solid rgb(255 255 255 / 30%); border-radius: 0.8cqw; font: inherit; text-transform: inherit; color: inherit; background: rgb(255 255 255 / 0%); cursor: pointer; transition: background-color 150ms cubic-bezier(0.685, 0.89, 0.315, 0.995) }
    .demo button:hover { background: rgb(255 255 255 / 14%) }
    .demo button:active { background: rgb(255 255 255 / 24%) }
    .demo footer button::before { content: attr(data-label); margin-right: 0.8cqw; opacity: 0.55 }
    .demo footer button { box-sizing: content-box; width: calc(var(--chars) * 1ch + 0.8cqw); text-align: left }
    .demo [data-label="shutter"] { --chars: 13 }
    .demo [data-label="iris"] { --chars: 9 }
    .demo [data-label="iso"], .demo [data-label="wb"] { --chars: 7 }
    .demo .rec::before { content: ''; display: inline-block; width: 1.2cqw; height: 1.2cqw; margin-right: 0.8cqw; border-radius: 50%; background: #ff3b30; animation: blink 1s infinite }
    .demo[data-recording="off"] .rec::before { background: transparent; box-shadow: inset 0 0 0 0.2cqw currentColor; animation: none }
    .demo .focus { position: absolute; left: var(--x); top: var(--y); width: var(--w, 22cqw); height: var(--h, 16cqw); translate: -50% -50%; border: 0.2cqw solid #ffd84d; pointer-events: none }
    .demo .focus span { position: absolute; bottom: 100%; left: -0.2cqw; padding-bottom: 0.6cqw; font-size: 1.4cqw; color: #ffd84d }
    @keyframes blink { 50% { opacity: 0.15 } }`}</style>
    <div className="focus">
      <span>af-s</span>
    </div>
    <header>
      <button
        className="rec"
        onClick={(event) => {
          const demo = event.currentTarget.closest('.demo');
          demo.dataset.recording = demo.dataset.recording === 'off' ? 'on' : 'off';
        }}
      >
        rec
      </button>
      <time>00:00:00:00</time>
      <span>4k · 24p</span>
      <span className="battery">76%</span>
    </header>
    <footer>
      <button
        data-label="shutter"
        data-values="1/60 1/125 1/250 1/500 1/1000"
        onClick={(event) => {
          const button = event.currentTarget;
          const values = button.dataset.values.split(' ');
          button.textContent = values[(values.indexOf(button.textContent) + 1) % values.length];
        }}
      >
        1/250
      </button>
      <button
        data-label="iris"
        data-values="f/1.4 f/2 f/2.8 f/4 f/5.6 f/8 f/11 f/16"
        onClick={(event) => {
          const button = event.currentTarget;
          const values = button.dataset.values.split(' ');
          button.textContent = values[(values.indexOf(button.textContent) + 1) % values.length];
        }}
      >
        f/2.8
      </button>
      <button
        data-label="iso"
        data-values="100 200 400 800 1600 3200"
        onClick={(event) => {
          const button = event.currentTarget;
          const values = button.dataset.values.split(' ');
          button.textContent = values[(values.indexOf(button.textContent) + 1) % values.length];
        }}
      >
        400
      </button>
      <button
        data-label="wb"
        data-values="3200K 4300K 5600K 6500K"
        onClick={(event) => {
          const button = event.currentTarget;
          const values = button.dataset.values.split(' ');
          button.textContent = values[(values.indexOf(button.textContent) + 1) % values.length];
        }}
      >
        5600K
      </button>
    </footer>
  </div>
</LensDistortion>

Shader Props

Name	Description	Type	Values
image	The image to use for the effect	`HTMLImageElement \| string`	Image object or URL
spread	Strength of the color split - how far the color layers are pushed apart. This is the master dial for the chromatic aberration; at 0 there is no split and all the other color controls do nothing	`number`	0 to 1
bias	Bias of the color spread: warps how the colors distribute along it. 0 spaces them evenly; toward +/-1 they bunch toward one end of the fan and spread out at the other (needs spread > 0, count > 2)	`number`	-1 to 1
angle	Angle of the color spread in degrees (needs spread > 0, perspective < 1)	`number`	0 to 360
perspective	Perspective of the spread: shapes its direction from a straight line to a radial burst. At 0 all layers spread along the straight line set by angle; at 1 they radiate outward from the centre (needs spread > 0)	`number`	0 to 1
count	Number of colored layers making the spread - more layers blend into a blur, fewer stay as separate ghosted copies (needs spread > 0)	`number`	2 to 50 (integer)
dispersion	Overall amount of color dispersion: at 1 each layer takes its own color from the spectrum, giving the chromatic aberration look; at 0 every layer keeps the original image color, so the spread reads as a plain blur (needs spread > 0)	`number`	0 to 1
dispersionShift	Balances the dispersion between a soft circular zone at the centre of the image and the rest of it: 0 applies it evenly over the whole image, -1 keeps it in the centre only, 1 keeps it at the edges only (needs spread > 0, dispersion > 0)	`number`	-1 to 1
dispersionColor	Rotates the colors around the hue wheel, 0 to 1 for a full turn (needs spread > 0, dispersion > 0)	`number`	0 to 1
focusCenter	Reduces the spread distance in a circular zone at the centre of the image. 0 keeps the full layers spread in the middle, higher values move the layers closer building an illusion of focus (needs spread > 0)	`number`	0 to 1
focusEdges	Reduces the spread distance along the image edges. 0 keeps the full layers spread at the edges, 1 restores the original image at the edges regardless of the chosen spread distance (needs spread > 0)	`number`	0 to 1
swirl	Bends the spread around the centre of the image, so the layers trail along circles like a vortex. Each layer is rotated around the centre by an angle growing along the spread, and the effect fades out beyond the inscribed circle (needs spread > 0)	`number`	-1 to 1
noise	Noise distortion over the spread direction within the spread distance (needs spread > 0)	`number`	0 to 1
noiseFrequency	Noise frequency (scale), higher value gives more detailed distortion (needs spread > 0, noise > 0)	`number`	0 to 1
noiseOffset	Shifts the noise pattern diagonally, can be used as a seed to get a different scatter (needs spread > 0, noise > 0)	`number`	0 to 1
lensBulge	Lens warp of the image geometry, applied before the color spread. 0 is flat, positive bulges out like a fisheye, negative pinches in like a pincushion. Strong positive values fade out the corners of the image	`number`	-1 to 1
lensCircle	Squeezes pixels outside the circle inward. 0 is off, 1 gives the image exact circular shape with any lensBulge value. Near the rim it also turns the spread radial and damps it, keeping the circular edge clean	`number`	0 to 1
grainMixer	Scatters the spread with grain noise, breaking up the edges of the colored layers (needs spread > 0)	`number`	0 to 1
grainOverlay	Post-processing b/w grain overlay	`number`	0 to 1
imageX	Pans the image horizontally behind the effect, without moving the effect itself. 0 is centred	`number`	-1 to 1
imageY	Pans the image vertically behind the effect, without moving the effect itself. 0 is centred	`number`	-1 to 1

Common Props

Name	Description	Type	Values
scale	Overall zoom level of the graphics	`number`	0.1 to 4
rotation	Overall rotation angle of the graphics	`number`	0 to 360
offsetX	Horizontal offset of the graphics center	`number`	-1 to 1
offsetY	Vertical offset of the graphics center	`number`	-1 to 1
width	CSS width style of the shader element	`number \| string`	—
height	CSS height style of the shader element	`number \| string`	—
fit	How to fit the rendered shader into the canvas dimensions	`enum`	\| `"contain"` \| `"cover"`
originX	Reference point for positioning world width in the canvas	`number`	0 to 1
originY	Reference point for positioning world height in the canvas	`number`	0 to 1
minPixelRatio	Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)	`number`	—
maxPixelCount	Maximum pixel count that the shader may process	`number`	—

Description

Lens Distortion image filter separates an image into shifting color layers (recreating the chromatic aberration of a lens) and warps the image geometry itself, curving it outward or inward like barrel and pincushion distortion.