Decay Card
“Interactive Decay Card – Motion-Driven Image Distortion Effect”
Made with Workshop
Build your own component with AI
About this Component
Description:
The DecayCard component is a modern, interactive card built with React, GSAP, and SVG filters to create a dynamic displacement and turbulence effect that reacts to mouse movement.
As users move their cursor across the screen, the image smoothly warps, rotates, and distorts, simulating a “decaying” or melting visual effect. This is achieved using:
🌀 SVG Filters (<feTurbulence> + <feDisplacementMap>) for the distortion texture.
⚡ GSAP animations for real-time motion control and performance-optimized updates.
🧭 Lerping (linear interpolation) to create smooth transitions between cursor states.
💡 Responsive transformations that give the illusion of depth and organic motion.
This component is perfect for creative portfolios, hero sections, or experimental UIs — adding a sense of fluidity and interactivity to static images.
