63:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 64:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 65:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollArea"] 66:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 67:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 68:T2f17,"use client"; import { useEffect, useId, useMemo, useState } from "react"; // --------------------------------------------------------------------------- // BrineFloat — a pricing section built as one shallow tank. A single SVG // water line runs behind the whole tier row (a low-amplitude two-segment // sine path that slowly morphs between itself and its mirror over 10s); each // tier card is a hydrometer float riding in it. Buoyancy, not the beam or // lever metaphor: every card gets its own fixed "weight class" (cheaper // tiers are heavier and sit lower, the recommended tier is deliberately the // lightest so it rides highest regardless of price rank) and the billing // toggle changes the brine's density — every float eases to a new // equilibrium on a spring curve with one visible overshoot (~600ms // back-out), so a price change is FELT as buoyancy rather than read as a // number swap. Two nested transforms per card: an outer wrapper carries the // equilibrium position (transitions on billing change and on hover, both // through the same spring easing) and an inner wrapper carries a small // continuous idle bob (±3px, per-card duration/delay so phases never lock). // Both are transform-only and pure CSS — no rAF loop, no canvas. The billing // switch is a native role=switch; its aria-checked announcement plus the // visible price text carries the change, so nothing needs a live region. // --------------------------------------------------------------------------- export type BrineTier = { name: string; tagline: string; /** USD per month at monthly billing */ monthlyPrice: number; cta: string; features: string[]; /** * Buoyancy weight class, 0..1. 1 = heaviest (sinks lowest), 0 = lightest * (rides highest). Cheaper tiers are conventionally heavier; the * recommended tier is given the lowest weight of the three so it always * rides above the others regardless of where its price falls. */ weight: number; recommended?: boolean; }; const DEFAULT_TIERS: BrineTier[] = [ { name: "Starter", tagline: "Dip a toe in", monthlyPrice: 9, cta: "Start free", weight: 1, features: ["1 workspace", "Community support", "3 day history"], }, { name: "Crew", tagline: "For teams that ship weekly", monthlyPrice: 29, cta: "Start Crew", weight: 0.12, recommended: true, features: ["Unlimited workspaces", "Priority support", "90 day history"], }, { name: "Fleet", tagline: "Every seat, every project", monthlyPrice: 79, cta: "Talk to sales", weight: 0.55, features: ["Unlimited seats", "SSO + audit log", "Unlimited history"], }, ]; // -- tank geometry (px) ------------------------------------------------------ const SINK_MIN = -14; // px — most a float can ride above the baseline const SINK_SPAN = 40; // px — full weight-class travel at monthly density const DENSITY: Record<"monthly" | "annual", number> = { monthly: 1, annual: 0.55, // annual = cheaper effective price = thinner brine = everything lighter }; function equilibriumPx(weight: number, billing: "monthly" | "annual") { return SINK_MIN + weight * DENSITY[billing] * SINK_SPAN; } // -- SVG water line: a two-segment cubic-bezier sine approximation, morphed // between itself and its vertical mirror over a 10s loop ------------------ const WAVE_W = 100; const WAVE_MID = 12; const WAVE_AMP = 3.2; function wavePath(amp: number) { const w = WAVE_W; const m = WAVE_MID; return `M0,${m} C${w * 0.25},${m - amp} ${w * 0.25},${m - amp} ${w * 0.5},${m} C${w * 0.75},${m + amp} ${w * 0.75},${m + amp} ${w},${m}`; } const WAVE_A = wavePath(WAVE_AMP); const WAVE_B = wavePath(-WAVE_AMP); function useReducedMotion() { const [reduced, setReduced] = useState(false); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); setReduced(mq.matches); const onChange = () => setReduced(mq.matches); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); return reduced; } // per-card bob timing — fixed, distinct values so the three phases never lock const BOB = [ { dur: 4.4, delay: 0 }, { dur: 5.6, delay: 0.9 }, { dur: 5.1, delay: 1.7 }, ]; export function BrineFloat({ tiers = DEFAULT_TIERS, annualMultiplier = 0.8, className = "", }: { tiers?: BrineTier[]; /** annual billing price multiplier applied to the monthly-equivalent shown, 0.8 = 20% off */ annualMultiplier?: number; className?: string; }) { const [billing, setBilling] = useState<"monthly" | "annual">("monthly"); const reduced = useReducedMotion(); const switchId = useId(); const annual = billing === "annual"; const priceOf = (t: BrineTier) => annual ? Math.round(t.monthlyPrice * annualMultiplier) : t.monthlyPrice; const wave = useMemo( () => (reduced ? WAVE_A : `${WAVE_A};${WAVE_B};${WAVE_A}`), [reduced] ); return (

Monthly Annual −{Math.round((1 - annualMultiplier) * 100)}%

{/* The vertical padding has to live on THIS element, not on the parent. `overflow-x-auto` sets overflow-x to a non-visible value, and per the CSS overflow spec that forces the computed overflow-y from `visible` to `auto` — so this scroll container clips vertically too. The cards are moved by transform (equilibrium -14..+26px, plus a +/-3px bob and a +4px hover push), and the heaviest float was being sliced off at the bottom edge: Starter's CTA rendered cut in half in both themes. Padding on the parent cannot help, since the clip happens here. */}

{tiers.map((tier, i) => { const bob = BOB[i % BOB.length]!; const price = priceOf(tier); return (

{tier.name}

{tier.recommended ? ( Recommended ) : null}

{tier.tagline}

${price} /mo

{annual ? "billed annually" : "billed monthly"}

); })}

); } const CSS = ` .bf-eq { transform: translateY(calc(var(--eq) + var(--bf-hover, 0px))); transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1); will-change: transform; } .bf-eq:hover, .bf-eq:focus-within { --bf-hover: 4px; } .bf-bob { animation: bf-bob-kf var(--bob-dur, 5s) ease-in-out var(--bob-delay, 0s) infinite; } @keyframes bf-bob-kf { 0%, 100% { transform: translateY(0px); } 25% { transform: translateY(-3px); } 75% { transform: translateY(3px); } } .bf-thumb { transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1); } @media (prefers-reduced-motion: reduce) { .bf-eq { transition: none; } .bf-bob { animation: none !important; transform: none !important; } .bf-thumb { transition: none !important; } } `; 62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L64",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L65",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}],["$","div","ns-accent-hover",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0059d1"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L65",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L65",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}],["$","div","color-ns-accent-hover",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent-hover)"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L67",null,{"files":[{"path":"registry/core/brine-float/component.tsx","content":"$68","type":"registry:ui","target":"components/ui/brine-float.tsx"}],"className":"h-[70svh] min-h-80"}]]}]