Noise Fill Pricing
Pricing where volume fills a plane of dots in blue-noise order: drag the images a month and the dots light evenly with no clumps, the newly lit ones flashing signal, while the plan that covers it lights up.
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.
Pricing
Pay for what you print.
For side projects and prototypes.
For products in production.
- 1M transforms a month
- Custom glyph faces
- Signed URLs
For heavy traffic and many teams.
Props
"use client";
import { useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
import type { ChangeEvent, CSSProperties, KeyboardEvent as ReactKeyboardEvent, ReactNode, RefObject } from "react";
/**
* NoiseFillPricing — pricing where volume fills a plane of dots.
*
* A slider sets the images a month on a log scale; beside it a plane of dots
* (WebGL2) fills in blue-noise order, evenly and without clumps, the dots
* just lit showing in signal for a moment before they settle. The tier that
* covers the volume lights up with its price. A native range input.
*
* Part of the Dither & ASCII kit: one ink, paper #f3f0e6, on a warm black
* ground #0b0b0d, with vermillion #ff4f2b as a second ink inside the
* pictures and for a live state. Cells snap to whole device pixels;
* scenes dither in linear light, photographs on a gentler curve. Funnel Display through
* var(--font-funnel) for display over Geist; Geist Mono for every glyph.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this section
Usage pricing drawn as quantity rather than a number alone. A native slider sets the images a month on a log scale from 5k to 20M; beside it a plane of round dots, rendered in WebGL2, fills in blue-noise order, so at every level the lit dots are spread evenly across the plane with no clumps or patterns, which is what makes a fill read as an amount. The level follows the slider on a spring, and a trail follows the level more slowly, so the dots lit a moment ago show in signal before they settle to paper (and the ones just switched off burn out in signal). The plan that covers the volume lights up with its price and what it includes, the call to action names it, and the caption says how the dots map to volume.
Curator’s note
The Dither & ASCII kit's pricing (slot 8), cut from dither-ascii-site. Pro: the kit's WebGL2 stage in its dots transform, with a spring-driven fill and trail, beside a slider and the plans.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Aurora Volume Pricing
sectionsUsage pricing where the sky answers the number: a log-scale slider rolls the price digit by digit while the aurora behind widens from a dim, cool display to the whole palette and the city lights up.
Fit Light Pricing
sectionsPricing driven by a usage slider on a log scale: every price rolls to its new digits as you drag, and a light moves to the plan that costs least at that volume, its arc growing as usage nears the next plan.
Usage Pricing Calculator
componentsA live estimator with real marginal-tier overage pricing and an annual discount toggle.