Third Plate Pricing
Engagements as plates on the lattice: an intro with a Project / Retainer toggle, then three plans; flip the toggle and the plans re-order in 380ms, the prices change, and the rule's break passes to the new third.
DOM + CSS0 deps1 file · 25 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
/**
* ThirdPlatePricing — engagements as plates on the lattice; choosing how you work re-orders them and hands the break on.
*
* An intro with a Project / Retainer toggle, then three plans. The third
* module breaks by the rule. Flip the toggle and the plans re-order in
* 380ms, the prices change and the break passes to the new third. Every
* word is a prop; controlled or uncontrolled.
*
* Part of the Broken Grid kit: a Klein-blue field #2416f0, paper plates
* #f1f0e8, ink #0a0a1f, and acid #e2ff3a only where a rule fires. One rule,
* "The Third": every third module in a run overshoots its leading edge by two
* gutters (overlapping its neighbour by one) and wears the acid bracket; the
* ends never break. Radius 0, no shadows; reflows in 380ms, no bounce. Big
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
How a studio prices, laid out by its own rule. The run is four modules: a short intro with a Project / Retainer toggle, then three plans on paper plates, each with its name, a price with its unit beneath, three lines and a call to action. By the rule the third module breaks, so one plan always leans into its neighbour with the bracket, and the neighbour keeps a gutter clear so nothing is covered. Flip the toggle and the plans re-order (the ones that suit that way of working come forward) in 380ms, all at once, the prices switch between fixed and monthly, and the break passes to whichever plan is now third. Every name, price, label, order and link is a prop (a plan can link somewhere else on a retainer), with an optional note for tax terms; run it uncontrolled with defaultMode, or controlled with mode and onModeChange to keep a checkout in step. The defaults are placeholders.
Curator’s note
The Broken Grid kit's pricing section (slot 8), cut from broken-grid-site. Pro: a stateful section of four modules whose order, prices and break change with one toggle, reflowed with FLIP.
