Solar Veil
BackgroundsCopper light curtains hang in fine, flowing folds above a dark horizon.
Glacial Rift
Sculpted ice walls frame a luminous, slowly shifting blue crevasse.
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 GlacialRift from "./GlacialRift";export default function Example() {return (<GlacialRiftspeed={0.65}spread={0.5}intensity={1}scale={1}grain={0.045}mouseInfluence={1}overlayOpacity={0.3}paused={false}minHeight={480}/>);}
Using Glacial Rift
Use spread to open the central crevasse or bring the layered ice walls closer together. The pale seam draws the eye through the centre; place short foreground content over a darker wall or add your own scrim.
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 |
|---|---|---|---|---|
| spread | number | No | 0.5 | Width of the central crevasse from 0 to 1. Higher values separate the ice walls. |
| 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.045 | 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. |