Turning login-page texture into adjustable parameters: breaking down the ASCII/Dither effect

Designer Kubai Ken Design's new column, "999 Little Tips to Make Your Vibe Products Feel More Refined," is now on episode 003. This time it's about Dither and ASCII parametric effects, used on interfaces like login pages and cards.

The two effects work on different logic. ASCII slices the image into a grid, and each cell swaps in a character based on brightness, getting denser from "." to "@". Font size controls character size, spacing controls grid density, sampling strength controls light-dark contrast, and the sampling area determines whether the characters pick up the dark or the bright parts of the image. Dither slices the image into pixel blocks, uses a 4×4 Bayer matrix as the threshold, and compresses each color into a few levels. Pixel block size controls size, spacing controls texture scale, and the higher the sampling strength, the fewer color levels and the heavier the grain.

The mask is the key to this effect. Both effects can add a vertical gradient mask that pushes the image back so the result reads more like texture than noise. Applying the filter directly tends to look like screen noise.

The author's recommended parameters: for ASCII, mask 90, sample the dark areas, sampling strength 100, size 37, spacing 0; for Dither, mask 88, sampling strength 100, size 15, spacing 0.

The highlight of the prompt: have the AI generate a parameter system that can be controlled in real time, rather than rendering a static image. Point it at an image or video in the project, and place a control panel beside it containing mask, filter toggle, palette, sampling tone, sampling strength, size, and spacing. Each filter's parameters are stored independently and restored when you switch back, with support for resetting to the recommended values. Video is redrawn frame by frame during playback, and dragging a slider takes effect in real time.

A few implementation details: when sampling, cover-fit the image onto a small canvas of about 480px, take about 12,000 evenly distributed points per frame, and use low/high percentiles for contrast mapping; the ASCII character set ramps from space to @ in a monospace font; Dither uses a 4×4 Bayer matrix, quantizing from 8 levels down to 2; the mask uses white on light pages and black on dark pages, with different opacity.

The video demos a login page: an orange-blue gradient background, an abstract pattern of green squares in the top-left corner, a login form on the right, and a control panel at the bottom adjusting various parameters in real time.

Someone asked what the video was made with, and the author replied: Opus 5.5, dictated straight out. The whole page is code the AI generated directly, not editing software.

Episodes 001 through 003 are all on Kubai Ken Design's homepage. The core idea of this series: texture doesn't depend on luck — make every variable an adjustable parameter, and AI can produce controllable results.