Chroma Card
Card with chromatic color shifting effect
chroma-card-tw
Customize
Image & Card
0.67
5
6
30
1
Camera
60
7
Hover Effects
0.3
0.02
0.095
3
Interaction
0.2
0.1
0.5
0.4
Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | number | string | "100%" | Width of the component in pixels or CSS value |
| height | number | string | "100%" | Height of the component in pixels or CSS value |
| imageSrc | string | "https://..." | Image source URL |
| imageAspectRatio | number | 0.67 | Aspect ratio of the source image |
| cardWidth | number | 5 | Width of the 3D card |
| cardHeight | number | 6 | Height of the 3D card |
| zoomLevel | number | 0.3 | Zoom level on hover (0-1) |
| rgbShiftAmount | number | 0.02 | RGB chromatic aberration shift amount (0-0.1) |
| pixelDisplaceAmount | number | 0.095 | Pixel displacement amount on hover (0-0.5) |
| hoverDuration | number | 3 | Duration of hover animation in seconds |
| rotationIntensity | number | 0.2 | Rotation intensity on mouse move (0-1) |
| scaleIntensity | number | 0.1 | Scale intensity on mouse move (0-0.5) |
| positionIntensity | number | 0.5 | Position movement intensity on mouse move (0-2) |
| interactionDuration | number | 0.4 | Duration of interaction animations in seconds |
| opacity | number | 1 | Master opacity (0-1) |
| cameraFov | number | 50 | Camera field of view |
| cameraZ | number | 7 | Camera Z position |
| borderRadius | number | 30 | Border radius in pixels |
| className | string | "" | Additional CSS classes |
| children | React.ReactNode | undefined | Content to render on top of the effect |