Chromatic Slip
RGB color separation effect with skew animation on scroll.
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 |
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
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.
FAQ
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.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.