Chromatic Aberration Liquid
Prismatic liquid gradient with SVG distortion filters creating chromatic effects.
Main Features of Chromatic Aberration Liquid
How to Use Chromatic Aberration Liquid in Next.js
Installation Guide for Chromatic Aberration Liquid
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #f5f5f5 | Background color |
filterBaseFrequency | string | 0.01 | Filter base frequency |
filterNumOctaves | number | 3 | Filter number of octaves |
filterScale | number | 150 | Filter scale |
layer1Colors | string | #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000 | First layer colors |
layer1Opacity | number | 0.8 | First layer opacity |
layer1Blur | string | 60px | First layer blur |
layer1Duration | number | 30 | First layer animation duration |
layer2Colors | string | #00ffff, #0000ff, #ff00ff, #ff0000, #ffff00, #00ff00, #00ffff | Second layer colors |
layer2Opacity | number | 0.8 | Second layer opacity |
layer2Blur | string | 40px | Second layer blur |
layer2Duration | number | 40 | Second layer animation duration |
overlayColor | string | rgba(255, 255, 255, 0.3) | Overlay color |
overlayBlur | string | 3xl | Overlay blur |
title | string | Prismatic | Title text |
className | string | Additional CSS classes |
Related Components
Interstellar Fluid Hero
Interactive fluid simulation creating cosmic nebula effects with mouse interaction. Deep space aesthetic with animated gas clouds and star trails.
Interstellar Background Hero
Warp tunnel effect simulating high-velocity travel through nebular clusters. Procedural WebGL engine with mouse-responsive space distortion.
Liquid Chrome Hero
Procedural simulation of molten chrome alloys with velocity-based distortion. Interactive liquid metal surface with specular highlights.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QWhat is chromatic aberration?
It's a visual effect where colors 'separate' at the edges of shapes, mimicking the look of real-world lens distortion for a more tactile feel.
QCan I adjust the distortion?
Yes, the `filterScale` and `filterBaseFrequency` props allow you to range from a subtle ripple to an extreme liquid warp.
QHow many color layers does it have?
It uses two dynamic color layers that pulse and rotate at different speeds to create a complex, evolving prismatic feel.