Options

scene() and <Blobscape> take the same options. Everything except seed is optional; height is required by scene(), and <Blobscape> measures it.

Scene options

Option	Default	Meaning
`seed`	required	Any string or number. Usually the URL path.
`height`	required in `scene()`	Height to cover, in px.
`width`	`1440`	Canvas width in px. Spacing is computed at this width.
`mode`	`"fixed"`	`"fixed"`: the canvas stays at `width`, centered; narrow screens crop both sides. `"fluid"`: x positions scale with the container, so blobs move closer together on narrow screens.
`shapes`	smooth, 7 points	Generator settings or your own paths. See Shapes.
`size`	`{ random: [600, 1200] }`	Blob size in px (the side of the box the shape is fitted to).
`rotation`	`{ random: [0, 360] }`	Degrees.
`opacity`	`0.4`	0 to 1.
`fill`	`"currentColor"`	Colours and gradients. See Fills.
`layout.minDistance`	`600`	Hard minimum distance between blob centers, px.
`layout.minGap`	`150`	Hard minimum gap between blob edges, px. Blobs never overlap.
`layout.density`	`1.25`	Target blobs per 1000px of height. The minimums are never broken to reach it, so very high targets level off.
`layout.bandHeight`	`1000`	Height of each generation band, px.
`placements`	none	Explicit blob positions; skips automatic layout. See Placements.

React-only props

Prop	Default	Meaning
`attach`	`"scroll"`	`"scroll"`: covers the parent and scrolls with it. `"fixed"`: pinned to the viewport.
`fullBleed`	`false`	Break out of the parent's width to the full viewport width.
`initialHeight`	`4000`	Height drawn on the server and first render, before measuring.
`className`, `style`		Applied to the layer element.

Distributions

Any setting that varies per blob takes a distribution. Blobs are numbered top to bottom.

Numbers

size: 800                                // every blob
size: { random: [600, 1200] }            // uniform random
size: { even: [600, 1200] }              // evenly spread, shuffled
size: { even: [600, 1200], groupSize: 4 }

even splits blobs into consecutive groups (default 8) and gives each blob in a group its own slice of the range, in shuffled order. Short pages stay balanced, not just long ones.

Choices (fills and shapes)

fill: { sequence: ["#fde4ec", "#eef0fb"] }           // cycles top to bottom
fill: { even: ["#fde4ec", "#eef0fb", "#e6f6ef"] }      // equal shares, shuffled per group
fill: { weighted: ["#fde4ec", "#eef0fb"], weights: [3, 1] }

Shapes

Generated

Setting	Default	Meaning
`points`	`7`	Vertices or bumps (minimum 3).
`irregularity`	`0.5`	0 is a regular shape; 1 varies the outline heavily, with deep inward bites.
`roundness`	`1`	0 is a sharp polygon, 1 a smooth blob; values between soften the corners.

Each setting is a number distribution: shapes: { points: { even: [5, 9] }, roundness: 0 }.

Your own paths

shapes: { d: "M0.5 0 L1 1 L0 1 Z" }                     // one shape
shapes: [{ d: "…" }, { d: "…" }]                          // equal shares
shapes: { sequence: [{ d: "…" }, { d: "…" }] }           // any choice distribution
shapes: { d: "M12 2 …", viewBox: [0, 0, 24, 24] }        // a 24px icon path

Paths are drawn in a 0–1 box unless you give a viewBox. Every SVG path command works, arcs included. A shape must be one closed path; shapes with holes aren't supported.

Fills

fill: "#fde4ec"                                  // any CSS colour, or "currentColor"
fill: { linear: { angle: 135, stops: [{ offset: 0, color: "#f7c873" }, { offset: 1, color: "#f08a6c" }] } }
fill: { radial: { stops: [{ offset: 0, color: "#9fb1f2" }, { offset: 1, color: "#eef0fb" }] } }

Gradients work anywhere a colour does, including in palettes. angle follows CSS: 0 points up, 90 points right. Each gradient is sized to its blob's on-screen bounds and stays upright however the blob is rotated. Changing colours never moves a blob.

Placements

To position blobs yourself, pass placements. Anything you leave out comes from the distributions:

<Blobscape
  seed="hero"
  placements={[
    { x: 200, y: 150, size: 900, rotation: 20 },
    { x: 1200, y: 700 },                  // size, rotation, fill from the distributions
  ]}
/>

x and y are canvas pixels. A placement can also set opacity, slot (an index into the fill list) and its own shape.