---
title: "Decay Card — Framer component · Best of Framer"
description: "$5.00 · Framer component · by RAMDIN SINGH · Cards. Description: The DecayCard component is a modern, interactive card built with React, GSAP, and SVG filters to create a dynamic…"
canonical: "https://framer.elliotli.dev/component/decay-card"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Decay Card

# Decay Card

[View on Framer](https://framer.com/marketplace/components/decay-card/?via=elliot-li)

![Decay Card preview image 1](https://framer.elliotli.dev/og/component/decay-card/0272f845bd57b4d6/1600x1200.jpg)

## Summary

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…

## Description

**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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #11228

## Details

- **Author**: RAMDIN SINGH
- **Price**: $5.00
- **Published**: 2025-10-22
- **Updated**: 2026-01-03
- **Added**: 2025-10-10
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator