Ink Bleed Reveal
A photograph that arrives the way ink wicks into paper — an organic front spreading from a point, with a wet tide-line of ink running just ahead of it.
- Category
- Animations
- Added
- 2026-09-24
- Deps
- none
- Updated
- 2026-09-24
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.
Black Tide — Flash day
Walk in.
Pick a sheet.
Every Thursday, first come first served. Deposit £40, from £90.
Message us to claim a sheet →Click the plate to bleed it in again
Props
"use client";
import { useCallback, useEffect, useId, useRef, useState } from "react";
/**
* A photograph that arrives the way ink wicks into paper: an organic, fibrous
* front spreads out from a point, with a dark tide-line of wet ink running
* just ahead of the image.
*
* PRECOMPUTE THE WHOLE REVEAL, ANIMATE ONE NUMBER. The obvious build — an SVG
* mask of a growing circle pushed through feTurbulence + feDisplacementMap —
* re-runs procedural noise over the entire image on every frame, and noise is
* the slowest filter primitive there is. Instead a small canvas renders a
* FIELD once per reveal: each pixel's value is its distance from the origin,
* roughened by fractal noise. The reveal is then just a threshold on that
* field — "show everything below t" — and each frame changes only t, the
* intercept of a component-transfer function. The same field thresholded a
* little further ahead, with a softer slope, is the ink tide-line.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this animation
Tattoo studios, print shops and anyone whose work is ink want their imagery to arrive like ink, not like a fade. The obvious way to build that — an SVG mask of a growing circle roughened by feTurbulence and a displacement map — recomputes procedural noise over the whole image on every frame, which is the single most expensive filter primitive and stutters on ordinary laptops. This entry does the expensive part once. A small canvas renders a field in which every pixel's value is its distance from the origin, perturbed either side by fractal noise; revealing the photograph is then just thresholding that field at a rising level, and each frame changes one attribute — the intercept of a component-transfer function. The same field thresholded slightly further ahead with a softer slope becomes the tide-line: a band of wet ink running in front of the image, which is what sells it as absorption rather than a wipe. The photograph itself is duotoned through the same ink and paper colours by default, so whatever the client supplies arrives inside the palette. The noise is centred on the distance rather than added to it, so the front wanders but never breaks into disconnected islands. In click mode every tap re-bleeds from the point touched.
Curator’s note
The first version animated feTurbulence inside the mask and ran at a stutter on a laptop. Baking the whole reveal into one field and animating a threshold made it free.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Grain Overlay
backgroundsA subtle animated film-grain texture layered over any section via canvas.
Topographic Contour Drift
backgroundsA survey map of terrain that never existed, traced live with marching squares and drifting underfoot.
Concrete Wall Texture
backgroundsA seamless procedural concrete surface drawn once to canvas and blended over anything.