Skip to content

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.

ProDither & ASCIIminimalneon

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

Pricing

Pay for what you print.

400k

Hobby$0

For side projects and prototypes.

Pro$39/mo

For products in production.

  • 1M transforms a month
  • Custom glyph faces
  • Signed URLs
ScaleTalk to us

For heavy traffic and many teams.

Start building · ProPlaceholder prices for a fictional product.

Props

400000
No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

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

Pro

Usage 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.

pricingslidercalculator
Pro

Pricing 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.

pricingsectionslider
Pro

A live estimator with real marginal-tier overage pricing and an annual discount toggle.

pricingcalculatorslider