Uilora Refractive Deep
A layered aquatic simulation featuring surface ripples, caustics, and refracted sediment grain.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| baseColor | string | #080808 | Bottom depth color |
| grainColor | string | #ffffff | Sediment particle color |
| refractionIndex | number | 0.4 | Light bending intensity |
| waveSpeed | number | 0.5 | Surface ripple speed |
| grainScale | number | 800 | Sediment density |
When to Use
Perfect for pool-themed sections, luxury travel sites, and meditative app backgrounds.
Best Practices
Use deep blue or black bases. The `refractionIndex` should be kept below 0.6 for the most realistic liquid look.
Why This Component Matters
It simulates physics: the grain on the 'bottom' is visibly distorted by the ripples on the 'top', creating a professional sense of volume and depth.
FAQ
QAre those ripples real?
Yes, they are calculated using multi-octave simplex noise combined with a mouse-driven sine-wave wake.
QWhat are caustics?
They are the bright 'peaks' of light that appear where the water surface concentrates sunlight, added here as a procedural highlight layer.
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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.