Chroma Card
Card with chromatic color shifting effect
chroma-card-tw
Customize
Tweak the props liveImage & 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 |
widthnumber | stringWidth of the component in pixels or CSS value
Default:
"100%"heightnumber | stringHeight of the component in pixels or CSS value
Default:
"100%"imageSrcstringImage source URL
Default:
"https://..."imageAspectRationumberAspect ratio of the source image
Default:
0.67cardWidthnumberWidth of the 3D card
Default:
5cardHeightnumberHeight of the 3D card
Default:
6zoomLevelnumberZoom level on hover (0-1)
Default:
0.3rgbShiftAmountnumberRGB chromatic aberration shift amount (0-0.1)
Default:
0.02pixelDisplaceAmountnumberPixel displacement amount on hover (0-0.5)
Default:
0.095hoverDurationnumberDuration of hover animation in seconds
Default:
3rotationIntensitynumberRotation intensity on mouse move (0-1)
Default:
0.2scaleIntensitynumberScale intensity on mouse move (0-0.5)
Default:
0.1positionIntensitynumberPosition movement intensity on mouse move (0-2)
Default:
0.5interactionDurationnumberDuration of interaction animations in seconds
Default:
0.4opacitynumberMaster opacity (0-1)
Default:
1cameraFovnumberCamera field of view
Default:
50cameraZnumberCamera Z position
Default:
7borderRadiusnumberBorder radius in pixels
Default:
30classNamestringAdditional CSS classes
Default:
""childrenReact.ReactNodeContent to render on top of the effect
Default:
undefined