Skip to content

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.

ProBroken Grideditorial

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

Engagements

Two ways to work with us.

A fixed project with a start and an end, or a monthly retainer with a standing team. Same people, same rule.

02Fixed

Identity

€24kfrom, per project

  • Strategy and naming
  • Logo, type and grid
  • Guidelines as a site
Start identity
03Fixed

Website

€38kfrom, per project

  • Design on the rule
  • Built in React
  • Handover and training
Start website
04Fixed

Sprint

€9kfrom, per project

  • Two weeks, one problem
  • A prototype you can ship
  • A written next step
Book a sprint

Placeholder prices, excluding VAT.

Props

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

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.

Related

Pairs well with

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

Pro

Memberships as three rooms along a corridor, each with its own grained lamp: point at one and its light rises while the others dim, and the billing switch resolves every price out of a blur.

sectionpricingmembership
NewPro

A pinned section that re-lays four modules into three layouts at scroll checkpoints, all at once in 380ms, and since each layout orders them differently the rule's break passes to the new third, overlapping its left-hand neighbour.

sectionservicesscroll
Pro

A pricing section where each plan is a thicker pane of glass than the last, and the plan you choose puts a lens over its price.

pricingsectionplans