Fee Squeeze Pricing
Pricing as what you'd pay each month: drag your sales on a slider with a squashy thumb, and every plan's fee springs to its new height as a soft column that stretches thin in flight and squashes as it lands; the cheapest turns bubblegum.
DOM + CSS0 deps1 file · 26 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
/**
* FeeSqueezePricing — pricing as what you'd pay each month, in soft columns.
*
* Drag your monthly sales (a native slider whose thumb squashes while you
* hold it) and every plan's fee redraws as a soft column that springs to
* its height, stretching thin as it moves and squashing as it lands. The
* cheapest plan turns bubblegum and a chip travels over to it.
*
* Part of the Tactile Maximalism kit: dough #f7f0e4, warm ink #17130f and
* one loud accent, bubblegum #ff2d78, filled once per screen; grain fixed to
* the material; soft shadows tinted by what casts them, never a hard offset.
* Everything soft keeps its area as it squashes and settles inside 450ms.
* Unbounded through var(--font-unbounded) for display over Geist. Respects
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
Pricing that answers the real question, what will I pay, for the visitor's own numbers. Drag your monthly sales (a real slider, from $100 to about $25,000, finer at the low end; its thumb squashes while you hold it) and each plan's fee, a monthly price plus a cut of every sale, redraws as a soft column: it springs to its new height, stretching thin while it moves fast and squashing fat as it lands, its area kept, settled inside half a second. The cheapest plan for you turns bubblegum and a "Cheapest for you" chip travels over to it, stretching as it goes. Every plan, price and rate is a prop; the default figures are placeholders.
Curator’s note
The Tactile Maximalism kit's pricing section (slot 8), cut from tactile-maximalism-site. Pro: a stateful multi-part section (a slider, springing columns, a travelling chip and three plans) on per-column spring physics.
