Glacial Rift
BackgroundsSculpted ice walls frame a luminous, slowly shifting blue crevasse.
Luminous Ridges
Glowing landscape ridges beneath drifting digital mist.
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 LuminousRidges from "./LuminousRidges";export default function Example() {return (<LuminousRidgesspeed={1}grain={0.06}mouseInfluence={1}scrollProgress={0}overlayOpacity={1}paused={false}minHeight={480}/>);}
Using Luminous Ridges
Copy the JavaScript file and its CSS module together. The original portfolio landscape uses native WebGL 2 with no textures, video or additional packages. Pass your hero content through children and set its layout and text colours in your own styles.
Use speed, grain and mouseInfluence to tune the scene, and connect scrollProgress to your own scroll timeline if needed. Pausing preserves the animation time. Reduced motion keeps a still landscape and disables pointer and scroll displacement; hidden tabs and offscreen instances stop animating.
Rendering uses a capped pixel budget and lowers resolution after sustained slow frames. A static CSS landscape appears if WebGL is unavailable or its context is lost, and the shader resumes if the browser restores the context.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| speed | number | No | 1 | Drift speed from 0 to 4. One matches the portfolio; zero freezes time while retaining pointer interaction. |
| grain | number | No | 0.06 | Film grain strength from 0 to 0.2. Zero removes the grain. |
| mouseInfluence | number | No | 1 | Mouse parallax multiplier from 0 to 3. Zero disables pointer movement. Touch input is ignored. |
| scrollProgress | number | No | 0 | Controlled terrain displacement from 0 to 1. Connect it to your own scroll progress; the component does not listen to page scrolling. Ignored under reduced motion. |
| overlayOpacity | number | No | 1 | Opacity of the original dark overlay, from 0 to 1. Lower values expose the brighter shader colours. |
| paused | boolean | No | false | Freeze time and pointer animation at the current frame. Prop changes still update the scene. Resuming preserves the elapsed animation 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 and overlay. Supply your own layout and text colours. |
| className | string | No | "" | Additional CSS classes merged with the component's base styles. |
| style | CSSProperties | No | undefined | Inline styles for caller-defined dimensions and visual overrides. |