Getting started

ridgescape draws layered landscapes behind websites and elements: rows of ridges, back to front, fading into the haze. You describe the scene (a seed, a palette, how many layers and what kind) and ridgescape generates it for the element's real size, every time that size changes.

{ seed: 1, palette: "dusk", layers: [{ profile: "peaks" }, {}, {}] }

Install

npm install ridgescape

React is an optional peer dependency (18 or 19). The core, imported from ridgescape, has no dependencies and runs anywhere. The React component lives at ridgescape/react.

React

<Ridgescape> is a layer, not a wrapper. Put it inside the element it should sit behind, and give that element ridgescapeParentStyle:

import { ridgescapeParentStyle } from "ridgescape";
import { Ridgescape } from "ridgescape/react";

<section style={{ ...ridgescapeParentStyle, background: "linear-gradient(#3d3466, #f6c49a)" }}>
  <Ridgescape scene={{ seed: "home", palette: "dusk", layers: 5 }} parallax />
  {children}
</section>

ridgescapeParentStyle is { position: "relative", isolation: "isolate" }. The first makes the layer cover this element; the second keeps the layer (which uses z-index: -1) from slipping behind the element's own background. In development, <Ridgescape> warns if the parent is missing either. Import it from ridgescape, as above: imported from ridgescape/react (a client module) into a server component, it arrives as an empty reference and the styles silently drop out.

The landscape is transparent above the ridges, so the element's own background is the sky. Every palette has a sky gradient you can use: resolve(scene).palette.sky.

Prop	Default	Meaning
`scene`		The landscape: see scenes, layers & anchors.
`renderer`	`"svg"`	`"canvas"` draws in the browser instead.
`parallax`	`false`	`true`, or `{ strength }` from 0 to 1 (default 0.3).
`attach`	`"scroll"`	`"fixed"` pins the layer to the viewport (no parallax).
`fullBleed`	`false`	Break out of the parent's width to the full viewport width.
`initialSize`	`{ width: 1440, height: 900 }`	Size rendered on the server and before measuring.
`reveal`	`"fade"`	`"none"` shows the server render without waiting for the measurement.
`className`, `style`		On the layer.

The landscape depends on the element's size, which the server doesn't know, so the server renders at initialSize with the layer hidden, and the layer fades in (150ms) once measured.

Presets

Hand-made scenes: sierra, meadow, misty, mesa, glacier, nightfall and pinewood are transparent above the ridges; summer, starlight and lakeside draw their own sky. Spread one and change what you like:

import { presets } from "ridgescape";

<Ridgescape scene={{ ...presets.sierra, palette: "alpine" }} />

Or start in the playground, which shows every option on a live preview and exports React code, SVG or PNG.