Chromatic Slip
RGB color separation effect with skew animation on scroll.
Main Features of Chromatic Slip
How to Use Chromatic Slip in Next.js
Installation Guide for Chromatic Slip
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 |
Related Components
When to Use
Excellent for tech brands, digital art portfolios, and Next.js applications that want to emphasize a high-energy, digital aesthetic. Use this React component when building 'impact' sections where you want to reveal content through an RGB color separation effect.
Best Practices
Follow React best practices by ensuring the `skewRange` is not so extreme that it breaks the layout or makes text unreadable. Maintain scalable component architecture by using the separate color layering props to stay within your brand guidelines. Optimize for performance by triggering the slip effect only once as the user reaches the trigger point.
Why This Component Matters in Modern UI Development
Chromatic aberration is a hallmark of modern frontend development style. This production-ready component helpsคุณ build an interface that feels like it's part of a high-tech data stream, adding semantic authority and visual premium to your real-world application architecture.
Frequently Asked Questions
QCan I customize the color separation channels?
Yes, you have full control over the `redColor`, `greenColor`, and `blueColor` props to create custom color profiles like CMYK or mono-tonal shifts.
QDoes it work with any font?
Yes, the chromatic slip is applied to the container, so any typography you place inside will benefit from the RGB separation effect.
QIs it responsive?
Absolutely! The container width and height are fully customizable and support responsive Tailwind classes.