Glacial Rift
BackgroundsSculpted ice walls frame a luminous, slowly shifting blue crevasse.
Opal Current
Pearlescent liquid folds shift between jade, rose and soft silver.
LIVE PREVIEWInteract with the component
Just React. No extra dependencies.
CSS ModulesCopy the component and its CSS module into your project.
Usage
Matches your current playground settings.
jsx
import OpalCurrent from "./OpalCurrent";export default function Example() {return (<OpalCurrentspeed={0.65}curl={1}intensity={1}scale={1}grain={0.035}mouseInfluence={1}overlayOpacity={0.3}paused={false}minHeight={480}/>);}
Using Opal Current
Adjust curl to move from broad diagonal folds to a more twisted surface. The pearl highlights are intentionally bright; lower intensity or raise overlayOpacity when placing light text above the background.
Copy the React file and its adjacent CSS module together. The scene uses native WebGL 2 with no external packages or assets. Pass foreground content through children and style it in your application.
Pause preserves the current frame and reduced motion disables automatic animation and pointer parallax. Hidden tabs and offscreen instances stop rendering. A static CSS fallback remains visible when WebGL is unavailable, and the canvas resumes after context restoration.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| curl | number | No | 1 | Surface distortion from 0 to 2. Zero creates smoother diagonal folds; higher values curl the membrane more strongly. |
| speed | number | No | 0.65 | Motion speed from 0 to 4. Zero freezes time while retaining pointer interaction. |
| intensity | number | No | 1 | Light intensity from 0.4 to 2. Adjusts the shader brightness without changing the foreground content. |
| scale | number | No | 1 | Scene magnification from 0.6 to 1.6. Higher values bring the forms closer. |
| grain | number | No | 0.035 | Film grain strength from 0 to 0.2. Zero removes the texture. |
| mouseInfluence | number | No | 1 | Mouse parallax strength from 0 to 3. Zero disables it. Touch input is ignored. |
| overlayOpacity | number | No | 0.3 | Opacity of the dark overlay, from 0 to 1. Use it to soften the scene behind foreground text. |
| paused | boolean | No | false | Freeze time and pointer animation at the current frame. Prop edits still update the scene; resuming preserves elapsed time. |
| minHeight | number | string | No | 420 | Minimum container height in pixels or a CSS length. Use style for additional sizing. |
| children | ReactNode | No | undefined | Optional foreground content above the decorative canvas. Supply your own layout and text colours. |
| className | string | No | "" | Additional CSS classes merged with the base component styles. |
| style | CSSProperties | No | undefined | Inline styles for caller-defined dimensions and visual overrides. |