---
title: "Dither Shader"
canonical_url: "https://framerhub.io/components/dither-shader"
last_updated: "2026-06-15T14:46:29.510Z"
---

## 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 for the perfect retro look.

**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 vertical gradient (bottom to top).

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

**Performance Optimized**
Auto-scaling resolution and offscreen pausing maintain high FPS on all devices.

## Use Cases

**Hero Backgrounds** — Create striking, interactive hero sections with retro vibes.

**Portfolio Sites** — Add a creative, artistic touch to design portfolios.

**Landing Pages** — Engage visitors with dynamic, responsive backgrounds.

**Music & Art Sites** — Perfect for creative industries needing bold aesthetics.

![Dither Shader Preview](/framerhub/img/components/control/dither-shader.jpg)

## How to Use

### Installation

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Dither Shader in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

### Customization

**Appearance Section**

- Shape: Square, Circle, Triangle, Diamond
- Color: Primary pattern color
- Pixel Size: Larger = blockier retro look
- Opacity: Overall transparency
- Edge Fade: Vignette effect

**Pattern Section**

- Pattern Density: How "full" the pattern looks
- Pattern Scale: Underlying noise texture scale
- Dither Intensity: Amount of noise/dithering
- Size Variation: Random size variation

**Animation Section**

- Animation Speed: Pattern evolution speed
- Rotation Speed: Pattern rotation
- Color Pulse: Enable pulsating color animation
- Pulse Speed: Color pulse animation speed
- Pulse Intensity: Strength of pulse effect

**Ripples Section**

- Enable Ripples: Toggle click/tap ripples
- Ripple Strength: Distortion intensity
- Ripple Width: Wave thickness
- Ripple Speed: Expansion speed

**Gradient Section**

- Enable Gradient: Switch to 2-color gradient
- Color 1: Bottom color of the gradient
- Color 2: Top color of the gradient

**Glow Section**

- Enable Glow: Add bloom/glow effect
- Glow Strength: Intensity
- Glow Size: Blur radius

**Performance Section**

- Performance Mode: High / Balanced / Low
- Auto Scale: Dynamic resolution adjustment
- Pause Offscreen: Save battery when hidden
- Target FPS: Framerate target (default: 60)

### Quick Tips

**Best Performance** — Use "Balanced" mode for most devices. Switch to "Low" on mobile for optimal performance.

**Retro Look** — Increase Pixel Size (8-16) and use muted colors for authentic retro aesthetics.

**Interactive Elements** — Enable Ripples and place over clickable areas for engaging user feedback.

**Canvas Editing** — The component auto-detects Framer Canvas and uses high quality mode so you always see accurate previews.

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

## Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

## Why Designers Love This

Dither Shader brings retro computing aesthetics to modern web design with zero performance compromises. The interactive ripples and smart optimization make it perfect for both eye-catching hero sections and subtle background effects.

---