ridgescape

Generated from a seed

Rolling hills, peaks, mesas and dunes. The same seed always draws the same landscape, so it's stable across deploys.

Repeats at any width

Every layer tiles seamlessly, so wide screens show more landscape instead of stretched hills.

Haze by depth

Layers fade into the distance on their own. Eight palettes to start from, and any colour can be set by hand.

Scroll parallax

Far layers lag behind as the page scrolls. Transforms only, nothing redrawn, and off for reduced motion.

SVG or canvas

SVG renders on the server and exports as a file; canvas draws in the browser. Both paint the same shapes.

Placed where you want

Anchors put a peak, a dip or a flat stretch at a position, blended into the terrain around them.

Tree lines

Conifers, broadleaf or mixed, sized by depth, with forests and clearings, merged into each ridge's silhouette.

Lakes

Still water that mirrors the sky, clouds and ridges behind it, with a bright shoreline and ripples.

Sky and clouds

Optionally, a gradient sky with a sun or a crescent moon, stars, and rows of puffy clouds or thin wisps.

Behind any element

<Ridgescape> is a layer: put it inside the element it should sit behind. It measures that element and redraws when it changes size.

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

export function Hero({ children }) {
  return (
    <section style={{ ...ridgescapeParentStyle, background: "linear-gradient(#3d3466, #f6c49a)" }}>
      <Ridgescape scene={presets.sierra} parallax />
      {children}
    </section>
  );
}

Presets

Each one opens in the playground, ready to change.