Fluid Refraction
Pointer-driven fluid refraction over an image or video. Raw WebGL simulates velocity, pressure and density, then samples the media with RGB separation and highlights. Pure React and TypeScript.
npx shadcn@latest add @compronents/fluid-refractionInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| Prop | Type | Default | Description |
|---|---|---|---|
| image / video | exclusive string media union | — | Supply exactly one media URL, with CORS permission for WebGL texture upload. Rendered with cover cropping. |
| refractionAmount | number | 15 | Distortion strength, source scale 0 to 100. |
| chromaticAberration | number | 10 | RGB refraction separation, source scale 0 to 100. |
| highlight | number | 50 | Density-masked specular light, source scale 0 to 200. |
| disappearSpeed | number | 2 | Density percentage removed per frame. |
| velocityDissipation | number | 99 | Velocity retention percentage per frame. |
| pressureDissipation | number | 80 | Pressure retention percentage per frame. |
| pressureIterations | number | 25 | Pressure solver iterations per frame. The source-page demo uses 50. |
| curl | number | 30 | Vorticity force strength. |
| splatRadius | number | 5 | Interaction radius, divided by 1000 for the shader. |
| interactOnHover | boolean | true | Disturb fluid on hover, or require pressing when false. |
| className / style / aria-label | string / CSSProperties / string | — | Container sizing and accessible description. Give it an explicit height. |
None.