Pixel Dither Trail
Move your mouse across the canvas and a glowing trail of retro dithered pixels follows your cursor , click, and a pixelated ring ripples outward. Fully customizable (color, pixel size, trail length, dither pattern) and it respects the user’s prefers-reduced-motion setting.
Client Wants It Pop
They have provided no other direction, but they will know it when they see it.
Theme Update Breaks Entire Site
The changelog describes this as “minor styling improvements.
Loading Spinner Promoted to Art
Visitors have started interpreting its slow rotation as a statement on modern patience.
Instructions
Open the JS script in the Supa Code Block element and edit the options at the end of the script. Each option is explained below:
color — The hex color of the dithered pixels drawn by the effect. Must be a 6-digit hex string like "#FF3827"; if it isn't valid, the code silently falls back to the default red-orange.
opacity — Overall transparency of the drawn pixels, from 0 (invisible) to 1 (fully solid). Values outside that range get clamped. In your example it's set to 1, so the dithered dots are fully opaque where they appear.
pixelSize — The size of one "pixel" of the effect in CSS pixels. The canvas is resized so each dither cell covers this many screen pixels — higher values give a chunkier, coarser pixel-art look; lower values give finer detail. Minimum is 1.
radius — How big the brush/pointer blob is, as a fraction of the canvas height (0.001–1). This controls the effective size of the trail: larger values make the dithered dot cluster spread over a wider area around the cursor.
trailLength — How many points make up the trailing chain that follows the cursor (clamped between 2 and 64). More points means a longer, smoother tail that lags behind the pointer; fewer means a short, tight trail. In your setup it's 48, which produces a fairly long snake-like trail.
dither — Which threshold pattern the shader uses to convert the smooth density field into on/off pixels. Valid strings:
"bayer8"— 8×8 Bayer matrix, fine and granular (default)"bayer4"— 4×4 Bayer, slightly coarser grain"bayer2"— 2×2 Bayer, very chunky crosshatch"halftone"— round-dot newspaper-style screen on a 6×6 tile"noise"— static random white noise per cell"diagonal"— 45° line-screen pattern
Anything unrecognized falls back to "bayer8".
ripple — Whether clicking/pressing spawns an expanding, fading ring of dithered pixels from the click point. Set to false to disable click ripples entirely.
rippleSize — The maximum radius an expanding click ripple grows to, as a fraction of the canvas height (clamped 0.01–1). Only matters if ripple is true.
respectReducedMotion — When true, the effect checks the user's prefers-reduced-motion setting and disables all animation (no trail, no ripples) for users who've requested reduced motion. Set to false to run the effect regardless.