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.
WebGL20 deps1 file · 63 KB TSXreduced-motion aware
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
// ---------------------------------------------------------------
}Details
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.
