Warped Card

An image card that bulges under the cursor

warped-card-tw

Customize

Image URL

Card Width

360

Aspect Ratio

1.30

Radius

0.95

Strength

1.10

Dampening

0.07

Transition Duration

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

widthstring | number

Container width

Default"100%"

heightstring | number

Container height

Default"100%"

cardWidthstring | number

Card width inside the container

Default360

aspectRationumber

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

Default1.3

imageSrcstring

Image source URL

Default"https://..."

radiusnumber

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

Default0.95

strengthnumber

Bulge distortion strength

Default1.1

dampeningnumber

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

Default0.07

transitionDurationnumber

Transition duration in seconds for hover in/out

Default0.8

borderRadiusstring | number

Border radius in CSS units

Default"16px"

classNamestring

Additional CSS classes

Defaultundefined

childrenReactNode

Content rendered above the effect

Defaultundefined