Dusk shader preview: Turns a photo into a blue-hour memory: out of focus, glowing, hazy and grainy.
ittybitty

Dusk

Turns a photo into a blue-hour memory: out of focus, glowing, hazy and grainy.

Code

Use as

Copy embed: paste into Webflow, Framer, Squarespace or any HTML · Copy for agent: paste into Cursor or Claude · Copy code: the files for your own build.

For your own build, add dusk.js, ittybitty-shader.js, runtime.js, pointer.js and texture.js next to this page. Highlighted values follow the controls.

<!-- Quickest: one element. Size it with CSS; it fills its box. -->
<script type="module" src="./ittybitty-shader.js"></script>
<ittybitty-shader effect="dusk" style="width: 100%; aspect-ratio: 16 / 10;"></ittybitty-shader>

<!-- Or with JavaScript, for full control: -->
<canvas id="dusk" aria-hidden="true" style="width: 100%; aspect-ratio: 16 / 10; display: block"></canvas>

<script type="module">
  import { dusk } from './dusk.js';

  const canvas = document.getElementById('dusk');
  const effect = dusk(canvas, {
    showSky: true,
    showGrain: true,
    image: '/examples/night-city.webp',
    blur: 0.5,
    depth: 0.8,
    glow: 0.8,
    grade: 0.7,
    haze: 0.3,
    fade: 0.6,
    speed: 0.4,
    cool: '#2f4f8f',
    shadow: '#170e0b',
    light: '#ff7a2c',
    twilight: 0.8,
    sky: [[0, '#14305e'], [0.5, '#3e64a6'], [0.78, '#a17aa8'], [1, '#ff8b45']],
    horizon: 0.42,
    grain: 0.5,
    grainSize: 1.5,
    interactive: true,
    // Performance
    dpr: 1,
    adaptive: true,
  });

  // Later: effect.set(…), effect.pause(), effect.resume(), effect.destroy()
</script>

Details

The frame is thrown out of focus so every light swells into a soft disc, and a twilight sky fills the dark above the horizon, deep blue at the top and glowing warm where it meets the land. Midtones cool into dusk while lights burn amber with a pale core and a halo, a milky haze lifts the shadows, the edges fall into warm black and heavy colour grain covers the lot. Dark shapes read as near and keep most of their focus, so silhouettes stand against the glow. The pointer pulls the focus where it rests.

Payload
9.1 KB brotli for dusk.js, ittybitty-shader.js, runtime.js, pointer.js and texture.js, measured at build time.
Resolution
Pixel ratio 1: it is all blur and grain.
Frame rate
Display rate.
When unseen
Stops rendering when the canvas leaves the viewport or the tab is hidden, and resumes where it left off.
Reduced motion
Shows a single still frame. Controls still update it.
Layers
Up to five effects fuse into one shader and one draw call. Filters such as dithering and halftone process the layers beneath them.
Browsers
Any browser with WebGL2: Chrome and Edge 56+, Firefox 51+, Safari 15+.
Licence
MIT. Copy it, change it, ship it.
Source
dusk.js on GitHub, in a public repo that logs every change.