Dotted Image

URL of the image to transform into dots. Supports JPG, PNG, WebP. For cross-origin images, ensure CORS headers are properly configured on the server.

Required

How the image fills the container. "cover" fills the entire container (may crop), "contain" shows the full image (may letterbox), "fill" stretches to fit, "none" uses natural size.

Default: cover

Size of the grid cell that each dot represents. Smaller values create more dots and higher detail but require more processing. Larger values create a more abstract, pixelated look.

Default: 4

Size of each dot relative to the cell size. 1.0 means dots touch each other, lower values create gaps between dots for a more sparse effect.

Default: 0.9

Shape of each dot. "circle" creates round dots, "square" creates rectangular pixels.

Default: square

Color shown between dots and in empty areas. Use "transparent" or rgba with 0 alpha for see-through backgrounds. Dark backgrounds work best for vibrant images.

Default: #000000 (Black)

Converts the image to grayscale before applying the dot effect. Creates a classic halftone newspaper look.

Default: Off

Color to blend with the original image colors. Only applies when Tint Strength is greater than 0. Use to create duotone or color-washed effects.

Default: #FFFFFF (White)

How much the tint color blends with the original colors. 0 means no tint, 1 replaces colors entirely with the tint. Ignored when Grayscale is on.

Default: 0

Probability of removing dots in flat color areas. Uses gradient detection to keep dots in detailed areas while removing them from uniform regions. Creates an artistic, incomplete look.

Default: 0.1

When on, averages a 3x3 pixel area for each dot's color. Creates smoother results. When off, samples only the center pixel for sharper but potentially noisier output.

Default: On

Enables mouse interaction with the dots. When off, the image displays as a static dot matrix without animation or distortion effects.

Default: On

Type of distortion applied near the mouse. "repel" pushes dots away from the cursor, "attract" pulls dots toward it, "swirl" rotates dots around the cursor position.

Default: repel

Intensity of the distortion effect. Higher values create more dramatic displacement of dots near the cursor.

Default: 3

Size of the area affected by distortion around the cursor. Larger values create a wider influence zone with smoother falloff.

Default: 80

How quickly the distortion effect follows the mouse. Lower values create a smooth, lagging trail effect. Higher values make the effect more responsive.

Default: 0.2

Amount of random oscillating movement applied to affected dots. Creates an organic, vibrating effect near the cursor. Set to 0 for no jitter.

Default: 4

Speed of the jitter oscillation. Higher values make dots vibrate faster. Works with Jitter Strength to create the overall jitter effect.

Default: 1

Maximum frames per second for the animation. Lower values reduce CPU usage but may appear less smooth. 60 is recommended for most displays.

Default: 60

When enabled, the distortion effect smoothly fades out when the mouse leaves the container. When off, the effect stops immediately.

Default: On

Speed of the fade animation when the mouse leaves. Lower values create a slower, more gradual fade. Only applies when Fade On Leave is enabled.

Default: 0.1