Skip to content

component

PixelEffect

By Inam

Details

Summary

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.

Description

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.

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400158508/148/228/309/79/15
  • All · #5047