DistortedMedia
The Dynamic Pixel Distortion component brings your visuals to life with immersive, interactive effects. Designed for high performance and creative flexibility, it turns ordinary im
Make it with Workshop
Build your own component with AI
About this Component
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.
