Dither Reveal

baseColor (default: '#07070c') The color of the overlay that covers the image outside the reveal area. Everything the "flashlight" hasn't reached yet is painted with this color at the opacity set by backgroundOpacity. In your init call it's #3f5059 — a slate blue-gray, which gives the hidden state a muted, tinted look instead of near-black.

backgroundOpacity (default: 0.9) A value from 0 to 1 controlling how much the overlay hides the image. At 1 the image is completely invisible outside the reveal; at 0 the overlay isn't drawn at all and the image shows through everywhere (the dither circle would just add a subtle brightened sparkle on top). Values in between give a ghosted, semi-visible image. Your 0.95 means the image is almost fully hidden until the pointer reveals it.

radius (default: 190) The size of the reveal circle around the pointer, in CSS pixels. Larger values create a bigger "flashlight" area. Your 270 makes a fairly wide reveal zone.

aspect (default: 1) The width-to-height ratio of the reveal shape. 1 is a perfect circle; values above 1 stretch it horizontally (e.g. 2 = twice as wide as tall), values below 1 stretch it vertically. Your 1.15 gives a slightly wide ellipse.

feather (default: 0.55) A 0–1 value controlling how wide the dithered gradient band is — the zone where the image dissolves in and out through scattered pixels instead of a hard edge. Low values (near 0) produce an abrupt, sharp edge with a thin dither ring; high values (near 1) make the whole circle a soft gradient of dots with only a small fully-revealed core. It's relative to the radius, so a bigger radius with the same feather also means a wider band in absolute pixels.

pixel (default: 3) How many CSS pixels each "block" of the effect covers. The image is downscaled to a low-res grid where each cell is either fully shown or fully hidden — this value is the on-screen size of one cell. Higher values give a chunkier, more retro/pixelated look and better performance; lower values give finer detail. Your 2 is fairly fine. (Changing this at runtime triggers a buffer rebuild.)

dither (default: 'bayer8') The pattern used to convert the smooth reveal gradient into on/off dots. Options:

• bayer2 / bayer4 / bayer8 / bayer16 — ordered dithering with increasingly large matrices; bigger matrices produce smoother gradients with finer, more intricate dot patterns.
• noise — random thresholding, giving a grainy, film-grain edge.
• halftone — concentric rings from cell centers, mimicking newspaper-style halftone dots.
• lines — horizontal stripe thresholding, a scanline-like look.

ditherSize (default: 3) The size of each dither pattern cell in CSS pixels — how "zoomed in" the dot pattern is. Higher values make the pattern blocks larger and more visible; lower values make it finer. Your 1 aligns the pattern 1:1 with the pixel grid, so each dither step matches one image block — a crisp, tight texture.

easing (default: 0.18) Pointer-follow smoothing, from 0 to 1. It's the fraction of the remaining distance the reveal circle covers each frame. Low values make the circle lag behind the cursor with a floaty, trailing motion; values near 1 snap it almost instantly to the pointer. If the user has prefers-reduced-motion enabled, the script forces instant snapping regardless. Your 0.18 gives a noticeably smooth, eased follow.

maxPixels (default: 400000) A performance guard: the maximum number of cells allowed in the internal low-res buffer. If the container is huge or pixel is very small such that the grid would exceed this count, the grid is automatically scaled down (cells effectively get bigger) to stay within the cap. This keeps per-frame computation bounded.

cursor (default: 'crosshair') The CSS cursor shown over the container. Accepts any valid CSS cursor value ('pointer', 'none', 'default', etc.). If you pass a falsy value, no cursor style is applied and the element inherits the normal one.