Warped Card

Image card with mouse-following bulge distortion shader

warped-card-tw

Customize

Tweak the props live

Image URL

Card Width360

Aspect Ratio1.3

Radius0.95

Strength1.1

Dampening0.07

Transition Duration0.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

widthstring | number

Container width

Default:"100%"

heightstring | number

Container height

Default:"100%"

cardWidthstring | number

Card width inside the container

Default:360

aspectRationumber

Card aspect ratio (height / width, e.g. 1.3 for portrait)

Default:1.3

imageSrcstring

Image source URL

Default:"https://..."

radiusnumber

Bulge distortion radius (0–1, fraction of the card)

Default:0.95

strengthnumber

Bulge distortion strength

Default:1.1

dampeningnumber

Smoothing speed for mouse follow (0 = instant, higher = smoother)

Default:0.07

transitionDurationnumber

Transition duration in seconds for hover in/out

Default:0.8

borderRadiusstring | number

Border radius in CSS units

Default:"16px"

classNamestring

Additional CSS classes

Default:undefined

childrenReactNode

Content rendered above the effect

Default:undefined