Backgrounds & Visuals
Chromatic Aberration Liquid
Prismatic liquid gradient with SVG distortion filters creating chromatic effects.
gradientchromaticliquidprismaticaberration
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 |