PixelEffect

Key Features:

• Image and Video Compatible: Don't just distort images—bring your videos to life with the same stunning effect for an even more dynamic result.

• Silky-Smooth Performance: Built on WebGL, the effect is rendered by the GPU, ensuring a high-performance animation that won't slow down your website.

• Advanced Animation Modes: Choose how the effect behaves. Trigger it purely with mouse interaction, have it animate automatically on scroll, or combine both for a reveal-and-interact experience.

• Contextual Hover Overlays: Add a layer of professionalism by displaying a logo, title, and date that elegantly fade in when a user hovers over the media.

• Fully Accessible: With support for alt text, the component remains accessible to screen readers and is SEO-friendly.

Full Creative Control:

• Interaction Physics: Control the strength, radius, and speed of the mouse-driven distortion.

• Grid Density: Go from a chunky, abstract look to a fine, detailed pixelation by adjusting the grid size.

• Relaxation Speed: Define how quickly the effect settles back to its original, clear state.

• On-Appear Effects: Customize the initial distortion amount and add a delay for perfectly timed entrance animations.

Perfect For:

• Hero sections that need to make a bold first impression.

• Interactive portfolios and project showcases.

• Agency websites for team member profiles or case study links.

• Digital art galleries and creative visual displays.

• Anywhere you want to replace a static element with something engaging and modern.