Blurs, glows & screens

Effects that read the layer inside them (the child) as a texture and rebuild it: blurs, glows, sharpening, pixelation, shadows, retro screens, glitches, fluted glass, page peels and mirror floors. A pointwise effect edits the child's color at one pixel; the words here are gather effects, which sample the child at other pixels too, so they can smear, spread and displace it. Every word here goes in a filter definition's effect: field, or spreads into a definition when it needs its own pass over the child first.

Finished effects are one call: gaussianBlur, motionBlur, bloom, pixelate, sharpen, scatter, bokehDefocus. Stacked looks are assembled with gatherStack from a sampling stage (how the child is first read: rgbSplit, chromaSmearTaps, crispTap, childTap) and ordered overlay stages that edit the result (scanlines, adjust, rimLit, shadowComposite). When several stages need the same geometry, build a frame once (sphereFrame, glitchFrame, fluteFrame, peelFrame) and hand it to each of them.

Blurs that need a separate pass (gaussianBlur, channelBlur, progressiveBlur, tiltShift, bloom, bokehDefocus) return both halves at once. Spread them into a definition that declares species: 'custom', requiresRTT: true and requiresChild: true instead of using effect:.

import {effects} from 'shaders/std'

Reach for it when

Example

import {defineShader, p, effects, transformColor, transformBoolean} from 'shaders/std'

const {gatherStack, childTap, shadowOffset, silhouetteCoverage, shadowComposite} = effects.blurs

// A soft drop shadow: read the child's silhouette offset in a compass direction, blur it,
// tint it, and place it behind the child.
export const SoftShadow = defineShader({
  name: 'SoftShadow',
  props: {
    color: {default: '#000000', transform: transformColor},
    distance: {default: 0.1},
    angle: {default: 135},
    blur: {default: 5},
    intensity: {default: 0.5},
    cutout: {default: false, transform: transformBoolean, compileTime: true},
  },
  effect: gatherStack(childTap(), [
    shadowComposite({
      coverage: silhouetteCoverage({
        at: shadowOffset({angle: p('angle'), distance: p('distance')}),
        blur: p('blur'),
      }),
      color: p('color'),
      intensity: p('intensity'),
      cutout: p('cutout'),
    }),
  ]),
})

Types

Words

• gaussianBlurA soft, even blur of the child.
• motionBlurSmears the child along a path: a straight streak, an arc around a point, or a zoom out of a point.
• blurPathThe three paths motionBlur can smear along.
• progressiveBlurA blur that ramps from sharp to full strength in one direction across the child.
• tiltShiftKeeps a band of the child in focus and blurs everything beyond it, like a tilt-shift lens.
• bloomA glow: the child's bright parts spread into a soft halo that adds back on top.
• bokehDefocusA photographic lens blur where bright highlights bloom into aperture-shaped discs.
• channelBlurBlurs red, green and blue by separate amounts, for a soft chromatic fringe.
• scatterScatters every pixel of the child by a random offset: a grainy diffusion, not a smooth blur.
• sharpenSharpens the child by boosting the contrast between each pixel and its neighbours.
• pixelateTurns the child into a grid of flat cells, each showing one color.
• gatherStackAssemble an effect from one sampling stage and an ordered list of overlay stages.
• childTapThe child's own color at this pixel, unchanged.
• shadowOffsetThe coordinate a shadow reads the child's silhouette from: distance away in the compass direction angle.
• silhouetteCoverageA soft copy of the child's alpha silhouette: a number per pixel from 0 to 1.
• shadowCompositeA tinted shadow behind the child.
• rgbSplitThe child with its red and blue pulled a little to either side, like a misaligned CRT.
• adjustBrightness and contrast, pivoting around mid-grey.
• scanlinesHorizontal scanlines darkening the child in a smooth wave.
• phosphorMaskA faint red, green and blue phosphor stripe pattern across the child.
• vignetteOverlayDarkens the child toward its corners.
• opaqueCloses a three-channel stack as a solid color with alpha 1.
• tapeWarpThe wobbling, jittering coordinates of a worn VHS tape, to feed into chromaSmearTaps.
• chromaSmearTapsThe child sampled like a VHS deck: brightness stays sharp while color bleeds sideways.
• beatPulseA faint brightness throb, like the mains hum of an old television.
• glitchFrameThe shared geometry of a digital glitch: when bursts fire, which horizontal bands jitter, and which blocks shift or flip.
• glitchRgbSplitThe child sampled through a glitch frame, with red and blue pulled apart inside the active bands.
• colorBarFillsNeon color bars filling the blocks a glitch frame currently has active.
• distortedScanlinesCRT-style scanlines that appear only where a glitch frame is currently distorting.
• sphereFrameThe geometry of a sphere bulging out of the canvas: where each pixel reads the child from, where the sphere ends, and which way its surface faces.
• crispTapOne clean sample of the child at a frame's warped coordinate.
• rimLitA tinted rim of light around the edge of a bulged surface, added on top of the child's color.
• fluteFrameThe geometry of fluted (reeded) glass over the child: where each pixel reads through the glass, how far its colors split, and the slope of the flute at that point.
• refractedTapsThe child seen through a flute frame, with edge handling and a color split when aberration is above 0.
• fluteHighlightA specular highlight running along each flute, added on top of the child's color.
• peelFrameThe geometry of a page curling up from one corner: where the curl reads the child from, how far it has turned, and how far each pixel is from the crease.
• peelComposeA finished page peel: the cast shadows, the flat page and the lit curl, layered back to front.
• curlShadingThe darkening in the crook of a curl, easing to full brightness at the lip.
• curlSheenThe band of light running up a curl.
• overhangShadowThe shadow a lifted curl casts on the flat page just past the crease.
• revealShadowThe shadow on the surface a peel reveals, just inside the crease.
• mirrorAcrossRowThe coordinate mirrored across a horizontal line, for reading a reflection below it.
• depthRampBlurThe blur half of a mirror floor: blurs the child more the further a row sits below the line.
• planarReflectionA mirror floor: the child as it is above a line, and its reflection fading out below it.
• screenedBloomA tinted glow of the child's bright parts, screened over a color you have already graded: film halation, phosphor bloom.
• frameSwayA slight drifting shift and rotation of where the child is read from, like film in an unsteady projector gate.
• blurPath.linearA straight streak along an angle prop, in degrees (0 points right, 90 points down).
• blurPath.orbitAn arc streak rotating around a center prop (a position in uv).
• blurPath.zoomA radial streak rushing outward from a center prop (a position in uv).
• brightestNearThe brightest color in a small ring around a point: the layer grown outward, so a spot just outside a bright area still reads as bright.