Glacial Rift
BackgroundsSculpted ice walls frame a luminous, slowly shifting blue crevasse.
Solar Veil
Copper light curtains hang in fine, flowing folds above a dark horizon.
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 SolarVeil from "./SolarVeil";export default function Example() {return (<SolarVeilspeed={0.65}folds={9}intensity={1}scale={1}grain={0.04}mouseInfluence={1}overlayOpacity={0.3}paused={false}minHeight={480}/>);}
Using Solar Veil
Raise folds for finer copper pleats or lower it for broad, theatrical sheets. Keep speed low to reveal the filament texture. The lower part of the composition stays darker and works well behind a restrained heading.
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 |
|---|---|---|---|---|
| folds | number | No | 9 | Fold frequency from 4 to 18. Higher values create narrower, more closely spaced curtain pleats. |
| 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.04 | 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. |