DitherShader

Demo: My Framer Site DemoDither 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.