Skip to content

Marbled Endpaper

Paper marbling computed live on a canvas: two inks on unbleached paper, combed slowly into veins, with the pointer as the stylus and one accent drop the reader places by clicking.

Proeditorialminimal
Category
Backgrounds
Added
2026-09-25
Deps
none
Updated
2026-09-26

This is a viberdy Pro component

The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.

Preview
Flyleaf No. 04Move to draw · click to drop ink

Bound
by hand

Props

15
Comb passes
Paper grain
7
Show sample copy
No runtime dependencies
"use client";

import { useEffect, useRef } from "react";

/**
 * MarbledEndpaper — paper marbling, computed rather than photographed.
 *
 * Traditional marbling floats ink on a bath of thickened water, then drags a
 * stylus or a comb through it. The ink never mixes; it is pushed aside. Both
 * moves have exact formulas: a drop of radius r moves every existing point
 * away from its centre so that distance d becomes sqrt(d² + r²), and a comb
 * line drags every point along itself by z·λ / (distance + λ). Each drop is
 * kept as a polygon, resampled whenever its edge stretches, and the picture
 * is those polygons painted oldest first. Because the maths is exact, a drop
 * can be watched swelling and a comb can be watched passing: each frame
 * applies a small increment and the sum is the same as one big move.
 *
 * TWO INKS, ONE THREAD. The bath is black and paper-white ink on unbleached

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}
Notes

About this background

Every background library has noise, gradients and particles; none of them has a flyleaf. Paper marbling is one of the oldest decorative surfaces there is, and it happens to be one of the few that can be computed exactly. Each drop of ink is kept as a polygon, and there are only two moves: a drop, which pushes everything already floating away from its centre, and a tine, a stylus or comb dragged through the bath, which pulls points along the line with a falloff. Because both moves compose, the bath can be seeded with a finished stone pattern and then kept alive slowly: a new drop swells in over six seconds every fifteen, and a comb passes over twelve seconds every forty-five, each pass undoing the last so the veins never shred. Two inks on unbleached paper keep it a printer's endpaper rather than a craft-fair one, and the single accent is the reader's own: click anywhere and a new accent drop swells in under the pointer while the old one fades back to ink. The pointer is a stylus that only moves the ink near it. The loop sleeps off screen, and reduced motion keeps the bath still.

Curator’s note

Marbling has exact maths: a drop pushes every point so its distance becomes the root of the sum of squares, and a comb drags points by strength over distance. Both compose, which is why a drop can be watched swelling instead of appearing, and why every comb pass can be undone by the next.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Featured
NewPro

A rotated print screen that swells into a pool of light under the pointer, with the gamma actually done right.

canvashalftoneprint
Featured
NewPro

A live Gray-Scott solver as a background plate — coral, mitosis and maze are the same two equations at different feed and kill rates.

canvasgenerativesimulation
Featured
NewPro

A gradient quantised to a few tones by an 8x8 Bayer matrix — offset then quantised, dithered in linear light, one cell per device pixel.

canvasditherprint