Animations & Motion
Chromatic Slip
RGB color separation effect with skew animation on scroll.
scrollrevealchromaticrgbglitch
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
image | string | https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=1000&auto=format&fit=crop | Image URL |
backgroundColor | string | bg-black | Background color of the component |
containerHeight | string | h-[120vh] | Height of the container |
containerWidth | string | w-[80vw] | Width of the container |
containerHeight2 | string | h-[60vh] | Height of the inner container |
redColor | string | bg-red-600 | Color of red layer |
greenColor | string | bg-green-600 | Color of green layer |
blueColor | string | bg-blue-600 | Color of blue layer |
text | string | IMPACT | Text displayed |
textColor1 | string | text-red-200 | Color of text on red layer |
textColor2 | string | text-green-200 | Color of text on green layer |
textColor3 | string | text-blue-200 | Color of text on blue layer |
textSize | string | text-9xl | Size of the text |
xRedRange | [number, number] | [-200, 0] | X range for red layer |
xBlueRange | [number, number] | [200, 0] | X range for blue layer |
skewRange | [number, number] | [45, 0] | Skew range in degrees |
opacityRange | [number, number] | [0, 1] | Opacity range |
opacityProgressRange | [number, number] | [0, 0.8] | Opacity progress range |
scrollOffset | [string, string] | ["start end", "center center"] | Scroll offset configuration |
className | string | Additional CSS classes |