Decay Card
Distortion effect card with GSAP animations and SVG filters
Configuring your account...
Please wait while we prepare everything for you
Usage
import DecayCard from './DecayCard';
<DecayCard width={200} height={300} image="https://picsum.photos/300/400?grayscale">
<h2>Decay<br/>Card</h2>
</DecayCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | 300 | Width of the card |
height | number | 400 | Height of the card |
image | string | 'https://picsum.photos/300/400?grayscale' | Background image URL |
children | ReactNode | undefined | Content to display over the image |
Features
- Mouse-responsive distortion: Image distorts based on mouse movement
- GSAP animations: Smooth transitions and effects
- SVG filters: Advanced visual effects using SVG displacement maps
- Responsive design: Adapts to different screen sizes
- Customizable content: Add any content over the distorted image