DitherShader

dot

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

dot