Chroma Card
Card with chromatic color shifting effect
chroma-card-tw
Customize
Image Aspect Ratio
0.67
Card Width
5.0
Card Height
6.0
Border Radius
30
Opacity
1.00
FOV
60
Camera Z
7.0
Zoom Level
0.30
RGB Shift
0.020
Pixel Displace
0.095
Hover Duration
3.0
Rotation Intensity
0.20
Scale Intensity
0.10
Position Intensity
0.5
Interaction Duration
0.4
Props
20| 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