Liquid Fractal
Organic flowing texture using SVG fractal noise creating a liquid effect.
Main Features of Liquid Fractal
How to Use Liquid Fractal in Next.js
Installation Guide for Liquid Fractal
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #4a0404 | Background color |
filterOpacity | number | 0.5 | Filter opacity |
turbulenceBaseFrequency | string | 0.015 | Turbulence base frequency |
turbulenceNumOctaves | number | 3 | Turbulence octaves |
colorMatrixValues | string | 1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0 | Color matrix values |
displacementScale | number | 50 | Displacement scale |
liquidColor | string | #dc2626 | Liquid color |
liquidOpacity | number | 0.8 | Liquid opacity |
gradientFrom | string | #7f1d1d | Gradient start color |
gradientVia | string | #991b1b | Gradient middle color |
gradientTo | string | #4a0404 | Gradient end color |
noiseOpacity | number | 0.2 | Noise overlay opacity |
noiseBaseFrequency | string | 0.8 | Noise base frequency |
noiseOctaves | number | 3 | Noise octaves |
borderColor | string | #dc2626 | Border color |
text | string | Liquid | Text label |
textColor | string | #ffffff | Text color |
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
QHow is the 'liquid' look achieved?
It uses an advanced combinations of SVG fractal noise, displacement mapping, and a custom color matrix to turn noise into a fluid-like surface.
QCan I adjust the flow speed?
The flow is driven by the internal animation of the turbulence base frequency, which you can customize for faster or more hypnotic movement.
QAre the colors customizable?
Yes, you can control the primary liquid color and the underlying tri-color gradient background independently.