# Akta benchmarks 01 default A shadcn/ui block from the [@craftui](https://www.craftui.space) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/craftui/akta-benchmarks-01-default). - Page, with a live preview: https://shadcn.exchange/r/craftui/akta-benchmarks-01-default - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/craftui/akta-benchmarks-01-default-light-82a7dd90950830f5.png - Registry item: https://www.craftui.space/r/akta-benchmarks-01-default.json - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://www.craftui.space/r/akta-benchmarks-01-default.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `@hugeicons/core-free-icons`, `@hugeicons/react`, `clsx`, `tailwind-merge` - Registry items: `https://www.craftui.space/r/craftui-base.json`, `utils` ## Files ### `components/craftui/sections/akta-benchmarks-01/default.tsx` ```tsx "use client"; import React from "react"; import { HugeiconsIcon } from "@hugeicons/react"; import { ChartAverageIcon, CheckmarkCircle02Icon, Coins01Icon, Radar01Icon, } from "@hugeicons/core-free-icons"; import { cn } from "@/lib/utils"; /* --------------------------------------------------------------------------- * akta-benchmarks-01 — four metrics, four graphic forms * * Same contract as akta-hero-01: every value lives in this file as a Tailwind * arbitrary value with its dark twin. Nothing is written into globals.css * except the notch device class and the scroll-reveal keyframe, which the hero * already ships. There is no `@theme` block and no `:root` palette. * * The SVG charts follow the same rule. Fills and strokes are `fill-[…]` / * `stroke-[…]` utilities on the SVG elements rather than inline `var()`s, so * the charts flip with `.dark` like everything else and never depend on a * token that was not installed. * * Every className is assembled with `cn()` in a fixed order: * * cn( layout , type , colour , state , device ) * ------------------------------------------------------------------------ */ /* ── Type ───────────────────────────────────────────────────────────────── */ const FONT_SANS = "font-[family-name:var(--font-geist-sans),ui-sans-serif,system-ui,sans-serif]"; const FONT_MONO = "font-[family-name:var(--font-geist-mono),ui-monospace,SFMono-Regular,Menlo,monospace]"; /* section headline — h2 */ const TYPE_HEADING_48 = "text-[32px] leading-[1.12] tracking-[-0.01em] font-normal sm:text-[40px] sm:leading-[1.1] sm:tracking-[-0.03em] lg:text-[48px] lg:leading-[1.08]"; /* cell title — h3 */ const TYPE_HEADING_20 = "text-[18px] leading-[1.33] tracking-[-0.02em] font-semibold sm:text-[20px] sm:leading-[1.3]"; /* the headline figure in every cell */ const TYPE_DISPLAY = `${FONT_MONO} text-[40px] leading-[1.1] tracking-[-0.06em] font-normal tabular-nums`; /* body copy */ const TYPE_COPY_16 = "text-[15px] leading-[1.6] tracking-[-0.01em] font-normal sm:text-[16px] sm:leading-[1.625]"; /* dense body, captions */ const TYPE_COPY_14 = "text-[13px] leading-[1.54] tracking-[-0.01em] font-normal sm:text-[14px] sm:leading-[1.57]"; /* the one mono label size — used in HTML cells and matched by the SVG charts */ const TYPE_LABEL = `${FONT_MONO} text-[12px] leading-[16px] font-normal`; /* ── Colour ─────────────────────────────────────────────────────────────── */ /* surfaces */ const BG_CANVAS = "bg-white dark:bg-black"; const BG_PANEL = "bg-[oklch(0.985_0.002_247.839)] dark:bg-[oklch(0.13_0.028_261.692)]"; const BG_BRAND = "bg-[oklch(0.488_0.243_264.376)] dark:bg-[oklch(0.546_0.245_262.881)]"; const BG_BRAND_TILE = "bg-[oklch(0.932_0.032_255.585)] dark:bg-[oklch(0.379_0.146_265.522)]"; const BG_TRACK = "bg-[oklch(0.967_0.003_264.542)] dark:bg-[oklch(0.21_0.034_264.665)]"; const BG_TRACK_HOVER = "bg-[oklch(0.928_0.006_264.531)] dark:bg-[oklch(0.278_0.033_256.848)]"; const BG_INERT = "bg-[oklch(0.872_0.01_258.338)] dark:bg-[oklch(0.373_0.034_259.733)]"; /* text */ const INK = "text-[oklch(0.13_0.028_261.692)] dark:text-[oklch(0.967_0.003_264.542)]"; const INK_MUTED = "text-[oklch(0.21_0.034_264.665)] dark:text-[oklch(0.707_0.022_261.325)]"; const INK_BRAND = "text-[oklch(0.379_0.146_265.522)] dark:text-[oklch(0.707_0.165_254.624)]"; const BRAND = "text-[oklch(0.488_0.243_264.376)] dark:text-[oklch(0.546_0.245_262.881)]"; /* SVG ink — the same roles as the text constants, as fill utilities */ const FILL_INK = "fill-[oklch(0.13_0.028_261.692)] dark:fill-[oklch(0.967_0.003_264.542)]"; const FILL_INK_MUTED = "fill-[oklch(0.21_0.034_264.665)] dark:fill-[oklch(0.707_0.022_261.325)]"; const FILL_BRAND = "fill-[oklch(0.488_0.243_264.376)] dark:fill-[oklch(0.546_0.245_262.881)]"; const FILL_ON_BRAND = "fill-white"; const FILL_INERT = "fill-[oklch(0.872_0.01_258.338)] dark:fill-[oklch(0.373_0.034_259.733)]"; const FILL_BRAND_TILE = "fill-[oklch(0.932_0.032_255.585)] dark:fill-[oklch(0.379_0.146_265.522)]"; const FILL_RULE = "fill-[oklch(0.707_0.022_261.325)] dark:fill-[oklch(0.373_0.034_259.733)]"; const STROKE_RULE = "stroke-[oklch(0.707_0.022_261.325)] dark:stroke-[oklch(0.373_0.034_259.733)]"; const STROKE_BRAND = "stroke-[oklch(0.488_0.243_264.376)] dark:stroke-[oklch(0.546_0.245_262.881)]"; const STROKE_BRAND_BORDER = "stroke-[oklch(0.623_0.214_259.815)] dark:stroke-[oklch(0.546_0.245_262.881)]"; const STROKE_CANVAS = "stroke-white dark:stroke-black"; /* Isometric faces recede toward the canvas rather than toward a darker step, * because the brand ramp inverts between themes — the dark-mode hover step is * *lighter* than solid, which would flip the shading. Mixing with the canvas * keeps the top face the most saturated in both. */ const FACE_BRAND = { top: FILL_BRAND, left: "fill-[color-mix(in_oklab,oklch(0.488_0.243_264.376)_74%,white)] dark:fill-[color-mix(in_oklab,oklch(0.546_0.245_262.881)_74%,black)]", right: "fill-[color-mix(in_oklab,oklch(0.488_0.243_264.376)_50%,white)] dark:fill-[color-mix(in_oklab,oklch(0.546_0.245_262.881)_50%,black)]", }; const FACE_GRAY = { top: FILL_INERT, left: "fill-[color-mix(in_oklab,oklch(0.872_0.01_258.338)_74%,white)] dark:fill-[color-mix(in_oklab,oklch(0.373_0.034_259.733)_74%,black)]", right: "fill-[color-mix(in_oklab,oklch(0.872_0.01_258.338)_50%,white)] dark:fill-[color-mix(in_oklab,oklch(0.373_0.034_259.733)_50%,black)]", }; const faces = (brand?: boolean) => (brand ? FACE_BRAND : FACE_GRAY); /* notch colour, set per call site as an arbitrary property */ const NOTCH_GRAY = "[--akta-notch-color:oklch(0.707_0.022_261.325)] dark:[--akta-notch-color:oklch(0.373_0.034_259.733)]"; /* ── Depth and separators ───────────────────────────────────────────────── * Dark rules sit at 16% white rather than the hero's 10%: this section is a * grid of hairlines on pure black with no panel behind them, and at 10% the * cell dividers dropped below what a normal display resolves. */ const SHADOW_BORDER = "shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_1px_2px_-1px_rgba(0,0,0,0.06),0_2px_4px_0_rgba(0,0,0,0.04)] dark:shadow-[0_0_0_1px_rgba(255,255,255,0.08)]"; /* color-mix(in oklab, C 45%, transparent) is just C at 45% alpha */ const RING_TILE = "shadow-[0_0_0_1px_oklch(0.623_0.214_259.815/0.45)] dark:shadow-[0_0_0_1px_oklch(0.546_0.245_262.881/0.6)]"; const RULE_T = "shadow-[inset_0_1px_0_0_rgba(0,0,0,0.08)] dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.16)]"; const RULE_Y = "shadow-[inset_0_1px_0_0_rgba(0,0,0,0.08),inset_0_-1px_0_0_rgba(0,0,0,0.08)] dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.16),inset_0_-1px_0_0_rgba(255,255,255,0.16)]"; /* right + bottom in one value, so a wrapping grid separates at any column count */ const RULE_CELL = "shadow-[inset_-1px_0_0_0_rgba(0,0,0,0.08),inset_0_-1px_0_0_rgba(0,0,0,0.08)] dark:shadow-[inset_-1px_0_0_0_rgba(255,255,255,0.16),inset_0_-1px_0_0_rgba(255,255,255,0.16)]"; const RULE_X_LG = "lg:shadow-[inset_1px_0_0_0_rgba(0,0,0,0.08),inset_-1px_0_0_0_rgba(0,0,0,0.08)] dark:lg:shadow-[inset_1px_0_0_0_rgba(255,255,255,0.16),inset_-1px_0_0_0_rgba(255,255,255,0.16)]"; const RULE_L_LG = "lg:shadow-[inset_1px_0_0_0_rgba(0,0,0,0.08)] dark:lg:shadow-[inset_1px_0_0_0_rgba(255,255,255,0.16)]"; /* ── Layout ─────────────────────────────────────────────────────────────── */ const GRID = "mx-auto w-full max-w-[90rem]"; /* ── Content ──────────────────────────────────────────────────────────────── * * Benchmark readouts. Every figure is drawn from its own value — `ratio` is the * value normalised against the largest in its column, so each field reads as * data rather than as decoration. `brand` marks the one row the section is * actually about; it is the only place blue is spent inside a cell. * * `chart` picks the form. The four metrics tell four different stories — a * blowout, a tight cluster, a near-miss, a ratio — and one shared bar list * flattened all of them into the same shape. `short` is the iso cell's rotated * axis label, which has a 66px lane to live in; `n` is the raw number for forms * that need to place a value on an absolute scale rather than a 0–1 ratio. */ export type BenchmarkRow = { name: string; short?: string; value: string; ratio: number; n?: number; brand?: boolean; }; export type BenchmarkMetric = { title: string; qualifier: string; direction: string; icon: typeof ChartAverageIcon; /* Unit line beside the headline figure. The figure itself is always the * brand row's own value, so there is one source for the number. */ headline: string; blurb: string; chart: "iso" | "units" | "radar" | "slab" | "bars"; rows: BenchmarkRow[]; }; const METRICS: BenchmarkMetric[] = [ { title: "F1 Score", headline: "top F1 score", qualifier: "accuracy × recall", direction: "Higher is better", icon: ChartAverageIcon, chart: "iso", blurb: "The F1 score is a measure of a model's accuracy that considers both precision.", rows: [ { name: "akta.pro", short: "akta.pro", value: "81.3", ratio: 1, brand: true, }, { name: "GPT-5.5", short: "GPT-5.5", value: "62.5", ratio: 0.769 }, { name: "SerpAPI", short: "SerpAPI", value: "52.6", ratio: 0.647 }, { name: "Perigon", short: "Perigon", value: "48.6", ratio: 0.598 }, { name: "Claude Sonnet 4.5", short: "Sonnet 4.5", value: "47.8", ratio: 0.588, }, { name: "Parallel", short: "Parallel", value: "46.4", ratio: 0.571 }, ], }, { title: "Accuracy", headline: "of 100 verified", qualifier: "precision", direction: "Higher is better", icon: CheckmarkCircle02Icon, chart: "units", blurb: "How much of what we return is correct — the share of articles that survive verification.", rows: [ { name: "akta.pro", short: "akta.pro", value: "93%", ratio: 1, n: 93, brand: true, }, { name: "Claude Opus 4.8", short: "Opus 4.8", value: "88%", ratio: 0.946, n: 88, }, { name: "GPT-5.4 mini", short: "GPT-5.4", value: "86%", ratio: 0.925, n: 86, }, { name: "Claude Sonnet 4.5", short: "Sonnet 4.5", value: "82%", ratio: 0.882, n: 82, }, { name: "GPT-5.5", short: "GPT-5.5", value: "81%", ratio: 0.871, n: 81 }, { name: "Parallel", short: "Parallel", value: "72%", ratio: 0.774, n: 72, }, ], }, { title: "Coverage", headline: "of all news reached", qualifier: "recall", direction: "Higher is better", icon: Radar01Icon, chart: "radar", blurb: "How much of the news that exists we actually reach, across every source in the index.", rows: [ { name: "Perigon", value: "73.7%", ratio: 1, n: 73.7 }, { name: "akta.pro", value: "72.7%", ratio: 0.986, n: 72.7, brand: true }, { name: "Exa", value: "68.7%", ratio: 0.932, n: 68.7 }, { name: "NewsAPI", value: "59.4%", ratio: 0.806, n: 59.4 }, { name: "GPT-5.5", value: "55.9%", ratio: 0.758, n: 55.9 }, { name: "SerpAPI", value: "50.6%", ratio: 0.686, n: 50.6 }, ], }, { title: "Cost", headline: "per 1,000 verified", qualifier: "per 1K accurate articles", direction: "Lower is better", icon: Coins01Icon, chart: "slab", blurb: "What a thousand verified articles costs you — priced on results, not on requests made.", rows: [ { name: "akta.pro", value: "$0.50", ratio: 0.175, brand: true }, { name: "SerpAPI", value: "$0.67", ratio: 0.235 }, { name: "NewsAPI", value: "$0.72", ratio: 0.253 }, { name: "Perigon", value: "$0.73", ratio: 0.256 }, { name: "Parallel", value: "$1.52", ratio: 0.533 }, { name: "GPT-5.4 mini", value: "$2.85", ratio: 1 }, ], }, ]; /* ── Header ─────────────────────────────────────────────────────────────── */ /* Eyebrow — a notched chip carrying a solid brand square and one mono label. * The square is the section's single decorative use of blue; everything else * structural in this section is gray. */ function SectionEyebrow({ children }: { children: React.ReactNode }) { return ( ); } /* Section header — eyebrow, h2, one paragraph of body copy, centred on the * grid and capped at a readable measure. */ function SectionHeader({ eyebrow, heading, description, }: { eyebrow: string; heading: string; description: string; }) { return (
{eyebrow}

{heading}

{description}

); } /* ── Chart chrome ─────────────────────────────────────────────────────────── * * Type inside the charts. An SVG's text scales with its viewBox, so the same * `fontSize` renders at a different pixel size in every chart unless the * charts share a scale. Two rules keep all four cells on one size: * * 1. every chart SVG uses the same viewBox WIDTH of 330, so one user unit is * one user unit everywhere — geometry is scaled to fit that box rather * than the box being fitted to the geometry; * 2. every chart SVG is capped at that same 330px, so the scale factor stays * between 0.97 (a 320px column at lg) and 1.00, never above. * * Together those hold every label at 11.6–12px — the same as the HTML cells' * TYPE_LABEL, which is the section's one mono label size. */ const LABEL = 12; const CHART_SVG = "w-full max-w-[330px]"; /* Every graphic form is drawn, so every graphic form needs a text equivalent. * This is the one the screen reader gets; the visual is hidden from it. */ function MetricTable({ metric }: { metric: BenchmarkMetric }) { return ( ); } /* Splits a headline value into its digits and whatever symbol sits against * them — "$0.50" -> "$" + "0.50", "93%" -> "93" + "%" — so the symbol can be * held off the number. The display step carries -0.06em tracking, which eats * into any gap set here, so 0.16em lands at roughly 4px of actual air at 40px. * Headline only: the chart labels are left alone. */ const FIGURE_PARTS = /^(\D*)([\d.,]+)(\D*)$/; function Figure({ value }: { value: string }) { const parts = FIGURE_PARTS.exec(value); if (!parts) return <>{value}; const [, prefix, digits, suffix] = parts; return ( <> {prefix && {prefix}} {digits} {suffix && {suffix}} ); } /* The cell's claim, stated in words and figures before the graphic argues it. * Every cell carries one, so the four read as a set however different their * bodies are. */ function MetricHeadline({ metric }: { metric: BenchmarkMetric }) { const brand = metric.rows.find((row) => row.brand) ?? metric.rows[0]; return (

{metric.headline}

); } /* Shared chrome for the graphic half of a cell: the direction line — the rule * for reading the header above it — then the claim, then whichever form the * metric asked for. Keeping this out of the forms means the * four cells stay aligned to each other however different their bodies get. */ function ChartFrame({ metric, children, }: { metric: BenchmarkMetric; children: React.ReactNode; }) { return (

{metric.direction}

{/* The figure floats in the middle of the space the claim leaves, so a * short chart falls between the claim and the graphic rather than * pooling under it. py-10 is the floor on that gap when a chart is tall. */}
{children}
); } /* ── Form 1 · isometric bar city ──────────────────────────────────────────── * * 2:1 dimetric rather than true 30° isometric: the shallower angle costs half * the vertical drop across six bars, which is the difference between fitting a * 1/4-width cell and not. * * project(x, y, z) = [x - y, (x + y) / 2 - z] * * 3D is a poor instrument for comparing close values — foreshortening and the * top face both read as extra length — so it is spent on F1 and only F1, where * the winning margin is 30% and precision is not what the cell is for. * * Labels are the whole difficulty here: in isometric, the space below-right of * every bar is occupied by the next bar, so nothing can sit under a bar. They * drop instead on vertical leaders to a lane below the ground line, rotated * -90°. A leader at the front vertex of bar i has x = i * PITCH, and bar i+1 * starts at i * PITCH + 12, so no leader ever crosses a solid. * * PITCH must clear BW + BD (48) or adjacent bars overlap in projection: a bar * spans ±BW from its own centre while centres sit PITCH apart. 50 leaves a * 2px gap. */ const ISO = { BW: 24, BD: 24, PITCH: 50, HMAX: 84, BASE: 162, LANE: 66 }; const project = (x: number, y: number, z: number) => [x - y, (x + y) / 2 - z]; const pt = (x: number, y: number, z: number) => project(x, y, z).join(","); function IsoBar({ row, i }: { row: BenchmarkRow; i: number }) { const { BW, BD, PITCH, HMAX, BASE } = ISO; const x0 = i * PITCH; const x1 = x0 + BW; const h = row.ratio * HMAX; const face = faces(row.brand); /* The front-most ground vertex: where the leader starts. */ const [lx, ly] = project(x1, BD, 0); /* Centre of the top face: mean of its four projected corners. */ const [tx, ty] = project(x0 + BW / 2, BD / 2, h); return ( {`${row.name}: ${row.value}`} {/* Seated on the top face, which binds the figure to its own solid. The * face is a constant 2*BW wide whatever the bar's height, so this never * crowds. */} {row.value} {row.short ?? row.name} ); } function IsoBars({ metric }: { metric: BenchmarkMetric }) { const { BD, PITCH } = ISO; const span = (metric.rows.length - 1) * PITCH + ISO.BW; const [gx1, gy1] = project(-12, BD, 0); const [gx2, gy2] = project(span + 12, BD, 0); return ( {/* Ground plane: one hairline the bars stand on and the leaders drop from. */} {/* Back to front. Bars never overlap at these spacings, but painting in * depth order keeps that true if PITCH is ever tightened. */} {metric.rows.map((row, i) => ( ))} ); } /* ── Form 2 · unit field ─────────────────────────────────────────────────── * * One cell per article, a hundred per provider, filled by how many come back * correct. Counted in the direction the cell's own qualifier promises: the * column says HIGHER IS BETTER, so the longer comb has to be the better one. * * The trade this makes: accuracy only runs 72–93%, so the combs differ by 21 * units out of 100 rather than dramatically. Read as errors the same data * spreads 4x and separates far harder — but it inverts the direction, and a * chart that contradicts its own label costs more than the contrast is worth. * * The track takes the full width with its label above rather than beside it; * at a hundred units a name column would squeeze each unit under a pixel. * Units flex, so the comb stays true at any column width. */ const UNITS = 100; function UnitField({ metric }: { metric: BenchmarkMetric }) { const rows = metric.rows.filter((row) => row.n != null); return (

Correct per 100

    {rows.map((row) => { const correct = Math.round(row.n as number); const ink = row.brand ? BRAND : INK_MUTED; return (
  • {row.short ?? row.name} {correct}
    • ); })}
); } /* ── Form 3 · ring radar ──────────────────────────────────────────────────── * * Coverage is the one column akta does not win, and a bar list said so twice — * once by rank, once by putting a visibly shorter bar under the brand name. A * polar plot states the same fact more fairly: two dots a hair apart on the * outer ring read as "tied at the top of the field", which is what a 1.0-point * gap on 73.7 actually is. * * The rings are the grid, not the data — providers sit at their own bearings, * and the dots are deliberately NOT joined into a spider polygon. Six rival * vendors are not one series, and connecting them would draw a shape whose * area means nothing. * * The radial scale starts at 40%, not 0. On a radial axis that is a real * distortion (area goes as r squared), so the grid rings are drawn and * labelled — the truncation is stated on the chart rather than hidden in it. */ const RADAR = { R: 92, MIN: 40, MAX: 80, RINGS: [50, 60, 70, 80], SWEEP: 24, LABEL_R: 116, HUB: 14, }; /* Rounded, because cos(-90°) lands on 6.1e-17 and SVG then carries an * exponent-notation coordinate through to the DOM. */ const round2 = (n: number) => Math.round(n * 100) / 100; const polar = (r: number, deg: number): [number, number] => { const a = (deg * Math.PI) / 180; return [round2(r * Math.cos(a)), round2(r * Math.sin(a))]; }; const radarR = (n: number) => ((n - RADAR.MIN) / (RADAR.MAX - RADAR.MIN)) * RADAR.R; function RingRadar({ metric }: { metric: BenchmarkMetric }) { const { R, RINGS, SWEEP, LABEL_R, HUB } = RADAR; /* Brand takes 12 o'clock; the rest follow in the order they were ranked. */ const brand = metric.rows.find((row) => row.brand) ?? metric.rows[0]; const ordered = [brand, ...metric.rows.filter((row) => !row.brand)]; const bearing = (i: number) => -90 + i * (360 / ordered.length); const rBrand = radarR(brand.n ?? 0); const [wx1, wy1] = polar(rBrand, -90 - SWEEP); const [wx2, wy2] = polar(rBrand, -90 + SWEEP); return ( {RINGS.map((v) => ( ))} {/* Spokes stay well under the rings — they associate a marker with its * label without competing with either. */} {ordered.map((row, i) => { const [x, y] = polar(R, bearing(i)); return ( ); })} {/* Tick dots where each ring meets the crosshair — the reference's way of * making a grid read as measured. */} {[90, 270].map((deg) => ( {RINGS.map((v) => { const [x, y] = polar(radarR(v), deg); return ; })} ))} {/* Brand reach as area, in a halftone the grid cannot be mistaken for. */} {ordered.map((row, i) => { const deg = bearing(i); const [x, y] = polar(radarR(row.n ?? 0), deg); const [lx, ly] = polar(LABEL_R, deg); const cos = Math.cos((deg * Math.PI) / 180); const anchor = Math.abs(cos) < 0.25 ? "middle" : cos > 0 ? "start" : "end"; return ( {`${row.name}: ${row.value}`} {/* Markers carry the data, so they outweigh every grid mark: a halo * on the brand, a 2.5px canvas ring on all of them so a dot stays * legible where it lands on a ring or a spoke. */} {row.brand && ( )} {row.name} {row.value} ); })} {/* Hub, drawn last so the spokes tuck under it. Same treatment as the * icon chip in the cell's title band. */} ); } /* ── Form 4 · isometric slab stack ────────────────────────────────────────── * * Cost is a ratio story, not a rank story: $0.50 against $2.85 is 5.7x, and * six bars sorted cheapest-first buried that under their own ordering. Stacked * slabs of identical footprint put thickness — the only thing that varies — * directly against thickness. * * Every slab projects to the same rhombus, so a gap in z is a clean vertical * gap on screen: nothing occludes anything, and each slab shows its top face * and both edges. Cheapest rides on top, so cost reads as weight piling up * underneath it. * * Scaled to the shared 330-unit box (x1.5 from the 220 this was drawn in) so * the stack keeps its physical size while its labels join the common scale. */ const SLAB = { W: 69, D: 69, TMAX: 69, GAP: 18 }; function SlabStack({ metric }: { metric: BenchmarkMetric }) { const { W, D, TMAX, GAP } = SLAB; /* Rows arrive cheapest-first; the stack builds from the bottom, so the most * expensive is laid down first and the brand wafer ends up on top. */ const stack = [...metric.rows].reverse(); const slabs = stack.reduce<{ row: BenchmarkRow; t: number; z0: number }[]>( (acc, row) => { const prev = acc[acc.length - 1]; const z0 = prev ? prev.z0 + prev.t + GAP : 0; return [...acc, { row, t: row.ratio * TMAX, z0 }]; }, [], ); return ( {slabs.map(({ row, t, z0 }) => { const face = faces(row.brand); const z1 = z0 + t; /* The left and right vertical edges project to (D/2 - z) and (W/2 - z), * not to the front edge's (W+D)/2 - z. Using the front edge put every * label 23px low — one plate out of step with its own slab. */ const [, midY] = project(0, D, z0 + t / 2); const ink = row.brand ? FILL_BRAND : FILL_INK_MUTED; return ( {`${row.name}: ${row.value}`} {row.name} {row.value} ); })} ); } /* ── Form 5 · ranked bars ─────────────────────────────────────────────────── * One ranked row: name and figure on a line, the bar beneath it. The bar is a * track plus a fill rather than a border, so it survives any surface. Not used * by the default data, but kept so a metric can opt back into the plain form. */ function MetricBar({ row }: { row: BenchmarkRow }) { return (
  • {row.name} {row.value}
    • ); } function RankedBars({ metric }: { metric: BenchmarkMetric }) { return ( ); } const CHARTS: Record< BenchmarkMetric["chart"], React.ComponentType<{ metric: BenchmarkMetric }> > = { iso: IsoBars, units: UnitField, radar: RingRadar, slab: SlabStack, bars: RankedBars, }; function MetricChart({ metric }: { metric: BenchmarkMetric }) { const Form = CHARTS[metric.chart]; return (
    ); } /* ── Cell ─────────────────────────────────────────────────────────────────── * One bento cell, read like a table column: the header band names the * metric and says what it measures, then below a rule comes the rule for * reading it, the claim, and the graphic that argues it. Two bands, one * rule between them, no boxes. Title first because the four headers then line up across the band — * under charts of different heights they never did — and because "higher is * better" only means something once you know what it is higher *of*. The * cell's own right and bottom rules come from RULE_CELL, so the grid keeps * separating correctly at one, two or four columns. */ function MetricCell({ metric }: { metric: BenchmarkMetric }) { return (
    {/* Header band: icon + name, then the blurb under it. The whole * definition of the column sits above the rule; everything below it is * evidence. */}

    {metric.title}{" "} ({metric.qualifier})

    {metric.blurb}

    ); } /* ── Section ────────────────────────────────────────────────────────────── * Header on the grid, then a full-bleed band whose top and bottom rules cross * the viewport while the cells stay on the 1440 grid. */ export interface AktaBenchmarks01Props { eyebrow?: string; heading?: string; description?: string; /* Replace the four default readouts. Each metric picks its own chart form. */ metrics?: BenchmarkMetric[]; className?: string; } function AktaBenchmarks01({ eyebrow = "Benchmarks", heading = "We Ranked Top as News Provider", description = "Best news quality at the lowest cost across News APIs, Agentic Search APIs, LLMs, and Bulk Scrapers.", metrics = METRICS, className = "", }: AktaBenchmarks01Props) { return (
    {metrics.map((metric) => ( ))}
    ); } export default AktaBenchmarks01; ```