---
title: "DitherShader — Free Framer component · Best of Framer"
description: "Free Framer component · by FramerHub.io  · Effects. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/dithershader"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/DitherShader

# DitherShader

dot

[View on Framer](https://framer.com/marketplace/components/dithershader/?via=elliot-li)

![DitherShader preview image 1](https://framer.elliotli.dev/og/component/dithershader/33bc4e029f839b4f/1600x1200.jpg)

## Summary

dot

## Description

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ybw7zuff-AlT4ITNTbmbPibw0SE9SgrmaPvmPdE)](https://framerhub.io/components?utm_source=framer_marketplace&utm_medium=framer_marketplace_components&utm_content=DitherShader)

Demo: [My Framer Site Demo](https://regular-heart-854082.framer.app/demo)Dither Shader

A high-performance, interactive dithering effect component for Framer. This component creates a retro-style pixelated aesthetic with dynamic patterns, shapes, and interactive ripple effects.Features

\- **Dynamic Dithering**: Customizable pixel size, pattern density, and noise amount.

\- **Shape Variants**: Choose between Square, Circle, Triangle, and Diamond patterns.

\- **Interactive Ripples**: Reacts to clicks/taps with customizable ripple animations.

\- **Gradient Support**: Optional dual-color gradient background with animation.

\- **Glow Effect**: Integrated post-processing glow for a neon look.

\- **Performance Optimized**: Includes auto-scaling resolution and offscreen pausing to maintain high FPS on all devices.

### Usage

1\. Drag the \`Dither Shader\` component onto your canvas.

2\. Resize it to fit your desired area (it works best as a background or a large visual element).

3\. Customize the appearance using the property controls in the right sidebar.

## Property Controls

### Appearance

\- **Shape**: The geometric shape used for the dither pattern (Square, Circle, Triangle, Diamond).

\- **Color**: The primary color of the pattern.

\- **Pixel Size**: The base size of the "pixels". Larger values create a blockier, more retro look.

\- **Opacity**: Controls the overall transparency of the component.

\- **Edge Fade**: Softens the edges of the component (useful for vignettes).

### Pattern

\- **Pattern Density**: Controls how "full" the pattern looks.

\- **Pattern Scale**: Adjusts the scale of the underlying noise texture.

\- **Dither Intensity**: Controls the amount of noise/dithering applied.

\- **Size Variation**: Adds random variation to the size of individual shape elements.

### Animation

\- **Animation Speed**: Controls the speed of the pattern evolution.

\- **Rotation Speed**: Rotates the entire pattern over time.

### Ripples

\- **Enable Ripples**: Toggles the interactive ripple effect on click/tap.

\- **Ripple Strength**: Intensity of the ripple distortion.

\- **Ripple Width**: Thickness of the ripple wave.

\- **Ripple Speed**: How fast the ripple expands.

### Gradient

\- **Enable Gradient**: Switches from a solid color to a 2-color gradient.

\- **Color 1 / Color 2**: The two colors of the gradient.

\- **Gradient Speed**: Speed of the gradient animation.

### Glow

\- **Enable Glow**: Adds a bloom/glow effect (uses post-processing).

\- **Glow Strength**: Intensity of the glow.

\- **Glow Size**: Radius of the glow blur.

### Performance

\- **Performance Mode**:

 - **High**: Always renders at high resolution (may be slow on old devices).

 - **Balanced**: Automatically adjusts resolution to maintain framerate.

 - **Low**: Renders at a lower resolution for maximum performance.

\- **Auto Scale Resolution**: Dynamically lowers resolution if FPS drops below the target.

\- **Pause Offscreen**: Pauses the animation when the component is not visible to save battery.

\- **Target FPS**: The framerate the component attempts to maintain (default: 60).

### Technical Notes

\- This component uses **Three.js** and custom GLSL shaders.

\- It automatically handles WebGL context loss and restoration.

\- In the Framer Canvas (editor), it forces "High" performance mode and disables auto-pausing to ensure you can always see what you are editing.

## Rank history [How rankings work →](/terms#rankings)

-   All · #4217

## Details

- **Author**: FramerHub.io
- **Published**: 2025-12-22
- **Updated**: 2026-04-07
- **Added**: 2025-11-30
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo