#What is Product?

Dither Shader is a high-performance interactive background Framer component designed for websites built with Framer. It generates a retro-style dithering effect using dynamic patterns and shapes rendered with WebGL shaders. The component creates a pixelated aesthetic that evolves over time, with optional ripple interactions when users click or tap the screen. It’s ideal for creative hero sections, futuristic landing pages, and experimental UI designs where designers want visually unique motion backgrounds without sacrificing performance.

#Features ⚡

• Dynamic Dithering Effect: Creates animated pixel-style patterns with adjustable density and noise levels.

• Shape Variants: Choose from Square, Circle, Triangle, and Diamond pattern styles.

• Interactive Ripple Animation: Clicking or tapping triggers customizable ripple distortions.

• Gradient Background Support: Optional animated dual-color gradient background.

• Neon Glow Effect: Post-processing bloom effect for glowing visuals.

• Performance Optimization: Auto resolution scaling and offscreen pausing maintain high FPS.

#Included Components/Templates

The component includes several configurable visual systems through Framer property controls.

• Dither Shader Component: Core interactive dithering background element.

• Shape Pattern Controls: Switch between geometric pattern styles.

• Pattern & Noise Settings: Customize density, scale, and dithering intensity.

• Animation Controls: Adjust animation speed and rotation behavior.

• Ripple Interaction System: Configure ripple strength, width, and expansion speed.

• Gradient & Glow Effects: Add animated gradients and neon-style glow.

• Performance Controls: Resolution scaling, FPS targeting, and offscreen animation pausing.

#Pricing 💸

Dither Shader follows a free component model.

• Free Download: Available at no cost on the Framer marketplace.

• Unlimited Usage: Can be used in personal or commercial projects.

• No Subscription Required: One-click install with no additional fees.

#Integrations 🧰

Dither Shader works especially well in modern Framer projects such as:

• Hero section animated backgrounds

• Startup landing pages

• Creative portfolio websites

• Experimental UI designs

• Tech and futuristic themed websites