Warped Card
Image card with mouse-following bulge distortion shader
warped-card-tw
Customize
360
1.3
0.95
1.1
0.07
0.8
Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | string | number | "100%" | Container width |
| height | string | number | "100%" | Container height |
| cardWidth | string | number | 360 | Card width inside the container |
| aspectRatio | number | 1.3 | Card aspect ratio (height / width, e.g. 1.3 for portrait) |
| imageSrc | string | "https://..." | Image source URL |
| radius | number | 0.95 | Bulge distortion radius (0–1, fraction of the card) |
| strength | number | 1.1 | Bulge distortion strength |
| dampening | number | 0.07 | Smoothing speed for mouse follow (0 = instant, higher = smoother) |
| transitionDuration | number | 0.8 | Transition duration in seconds for hover in/out |
| borderRadius | string | number | "16px" | Border radius in CSS units |
| className | string | undefined | Additional CSS classes |
| children | ReactNode | undefined | Content rendered above the effect |