blobscape

Seeded, organic background shapes for the web. Same page, same blobs, every time.

npm install blobscape

Open the playground →Read the docs

Seeded

The same seed (usually the URL path) gives the same layout on every reload, on the server and in the browser.

Grows with the page

Longer pages get more blobs, spread evenly but never on a grid. Blobs above never move.

Behind your content

Large soft shapes at 40% opacity, aria-hidden and click-through.

Shards to blobs

One roundness setting runs from sharp polygons to smooth curves. Bring your own SVG paths too.

Colour and gradients

Single colours, palettes in sequence or equal shares, and gradients that stay upright.

React or plain SVG

A tiny React layer, or a zero-dependency core that writes SVG strings for Node and static sites.

In React

import { blobscapeParentStyle } from "blobscape";
import { Blobscape } from "blobscape/react";

export function Page({ pathname, children }) {
  return (
    <main style={{ ...blobscapeParentStyle, maxWidth: 720, margin: "0 auto" }}>
      <Blobscape seed={pathname} fullBleed />
      {children}
    </main>
  );
}

The blobs break out to the full browser width and cover the full height of your content. See getting started for Next.js, fixed layers and SVG output.