DitherShader
A high-performance, interactive dithering effect component for Framer.
Make it with Workshop
Build your own component with AI
A high-performance, interactive dithering effect component for Framer.
Make it with Workshop
Build your own component with AI
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.
- 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.
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.
- 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 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 Speed: Controls the speed of the pattern evolution.
- Rotation Speed: Rotates the entire pattern over time.
- 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.
- 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.
- Enable Glow: Adds a bloom/glow effect (uses post-processing).
- Glow Strength: Intensity of the glow.
- Glow Size: Radius of the glow blur.
- 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).
- 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.
