4f: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 50: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51:T87e,"use client"; import { defineChart, dot } from "@tanstack/charts"; import { motion } from "@tanstack/charts/motion"; import { Chart } from "@tanstack/charts/react/core"; import { scaleLinear } from "@tanstack/charts/scales/linear"; import { useMemo } from "react"; import type { MixRow } from "../lib/data"; import { SPRING } from "../lib/tokens"; const renderer = motion({ initial: "always", transition: SPRING }); interface Cell { id: string; col: number; row: number; plan: string; } // A hundred dots, one per percent. Cells fill left to right, top to bottom; // keys carry the plan so a shifted percent pops out and back in. export const DotWaffle = ({ mix, reveal, size, ladder, }: { mix: MixRow[]; /** 0 → 1 entrance progress; the grid inks in dot by dot. */ reveal: number; size: number; ladder: readonly string[]; }) => { const revealed = Math.min(100, Math.floor(reveal * 101)); const definition = useMemo(() => { const bounds: number[] = []; let acc = 0; for (const m of mix) { acc += m.share; bounds.push(acc); } const cells: Cell[] = Array.from({ length: revealed }, (_, i) => { const slot = bounds.findIndex((b) => i < b); const plan = mix[slot === -1 ? mix.length - 1 : slot]?.plan ?? ""; // Fill left → right, top → bottom, so the darkest plan starts where the // legend starts reading. return { col: i % 10, id: `${i}:${plan}`, plan, row: 9 - Math.floor(i / 10) }; }); return defineChart({ color: { domain: mix.map((m) => m.plan), range: [...ladder] }, guides: false, margin: 0, marks: [ dot(cells, { color: "plan", key: "id", r: size / 30, x: "col", y: "row", }), ], scales: { x: { scale: scaleLinear().domain([-0.65, 9.65]) }, y: { scale: scaleLinear().domain([-0.65, 9.65]) }, }, }); }, [mix, revealed, size, ladder]); return ( ); }; 52:Te77,"use client"; import { defineChart, dot, lineY, text, tickX } from "@tanstack/charts"; import { motion } from "@tanstack/charts/motion"; import { Chart } from "@tanstack/charts/react/core"; import { scaleLinear } from "@tanstack/charts/scales/linear"; import { useMemo } from "react"; import type { DayRow } from "../lib/data"; import { FAINT, INK, MUTED, PAPER, SPRING } from "../lib/tokens"; const renderer = motion({ initial: "always", transition: SPRING }); // One dot = one day, hollow = weekend, barcode floor keeps the calendar // honest. Days land dot by dot; the hairline threads them once the month is // complete. export const HairlineLine = ({ days, reveal, yMax, height, initialWidth, }: { days: DayRow[]; /** 0 → 1 entrance progress; days land left to right as it advances. */ reveal: number; yMax: number; height: number; initialWidth: number; }) => { const revealed = Math.min(days.length, Math.floor(reveal * (days.length + 1))); const definition = useMemo(() => { const shown = days.slice(0, revealed); const complete = revealed >= days.length; const weekdays = shown.filter((d) => !d.weekend); const weekends = shown.filter((d) => d.weekend); let [peak] = days; for (const d of days) { if (peak === undefined || d.value > peak.value) { peak = d; } } const last = days.at(-1); // Two callouts crowd each other when the peak already sits near day 30. const callouts: DayRow[] = []; if (complete && peak !== undefined) { callouts.push(peak); if (last !== undefined && last.day !== peak.day && peak.day < 26) { callouts.push(last); } } return defineChart({ guides: false, margin: 0, marks: [ tickX(shown, { key: "day", length: 8, stroke: FAINT, strokeWidth: 1, x: "day", y: () => 0, }), ...(complete ? [ lineY(days, { key: "day", stroke: INK, strokeWidth: 1.25, x: "day", y: "value", }), ] : []), dot(weekdays, { fill: INK, id: "weekday-dots", key: "day", r: 2.4, x: "day", y: "value", }), dot(weekends, { fill: PAPER, id: "weekend-dots", key: "day", r: 2.6, stroke: INK, strokeWidth: 1.1, x: "day", y: "value", }), text(callouts, { anchor: (d) => (d.day >= 27 ? "end" : "middle"), dx: (d) => (d.day >= 27 ? 3 : 0), dy: -13, fill: INK, fontSize: 11.5, fontWeight: 800, key: "day", text: (d) => `${d.value}`, x: "day", y: "value", }), ], motion: { path: "morph" }, scales: { x: { scale: scaleLinear().domain([1, 30]) }, y: { scale: scaleLinear().domain([0, yMax * 1.2]) }, }, }); }, [days, revealed, yMax]); return (

DAY 1 DAY 15 DAY 30

); }; 53:Tc4c,"use client"; import { defineChart, text, tickY } from "@tanstack/charts"; import { motion } from "@tanstack/charts/motion"; import { Chart } from "@tanstack/charts/react/core"; import { scaleLinear } from "@tanstack/charts/scales/linear"; import { scalePoint } from "@tanstack/charts/scales/point"; import { useMemo } from "react"; import type { PlanRow } from "../lib/data"; import { INK, MUTED, SPRING } from "../lib/tokens"; const renderer = motion({ initial: "always", transition: SPRING }); // One rung = $2k of MRR. The bar is a ladder you can count. const RUNG = 2; interface Rung { id: string; plan: string; y: number; fifth: boolean; } export const RungBars = ({ plans, reveal, height, initialWidth, }: { plans: PlanRow[]; /** 0 → 1 entrance progress; rungs climb in as it advances. */ reveal: number; height: number; initialWidth: number; }) => { const totalRungs = plans.reduce((sum, p) => sum + Math.round(p.value / RUNG), 0); const revealed = Math.min(totalRungs, Math.floor(reveal * (totalRungs + 1))); const definition = useMemo(() => { const rungs: Rung[] = plans.flatMap((p) => Array.from({ length: Math.round(p.value / RUNG) }, (_, i) => ({ fifth: (i + 1) % 5 === 0, id: `${p.plan}-${i}`, plan: p.plan, y: (i + 1) * RUNG, })), ); // The ladder climbs column by column, rung by rung. const shown = rungs.slice(0, revealed); const done = new Map(); for (const r of shown) { done.set(r.plan, (done.get(r.plan) ?? 0) + 1); } const labeled = plans.filter((p) => (done.get(p.plan) ?? 0) >= Math.round(p.value / RUNG)); const top = Math.max(...plans.map((p) => p.value)) * 1.36; return defineChart({ guides: false, margin: 0, marks: [ tickY(shown, { key: "id", span: 0.5, stroke: (d) => (d.fifth ? INK : "rgba(27,27,25,0.55)"), strokeWidth: 1.2, x: "plan", y: "y", }), text(labeled, { dy: -13, fill: INK, fontSize: 12, fontWeight: 800, key: "plan", text: (d) => `${d.value}`, x: "plan", y: "value", }), ], scales: { // Fixed domains keep columns and headroom still while marks enter. x: { scale: scalePoint() .domain(plans.map((p) => p.plan)) .padding(0.5), }, y: { scale: scaleLinear().domain([0, top]) }, }, }); }, [plans, revealed]); return (

{plans.map((p) => ( {p.plan} ))}

); }; 54:Ta1e,"use client"; import { defineChart, vector } from "@tanstack/charts"; import { motion } from "@tanstack/charts/motion"; import { Chart } from "@tanstack/charts/react/core"; import { scaleLinear } from "@tanstack/charts/scales/linear"; import { useMemo } from "react"; import type { ChannelRow } from "../lib/data"; import { SPRING } from "../lib/tokens"; const renderer = motion({ initial: "always", transition: SPRING }); interface RingTick { id: number; x: number; y: number; rotate: number; channel: string; major: boolean; } // 100 radial dashes, one per percent, read clockwise from noon. The reveal // sweeps the dial once; after that each scene twists it a few degrees so the // update itself is visible motion. export const TickRing = ({ channels, reveal, size, twist, ladder, }: { channels: ChannelRow[]; /** 0 → 1 entrance progress; the dial sweeps clockwise as it advances. */ reveal: number; size: number; twist: number; ladder: readonly string[]; }) => { const revealed = Math.min(100, Math.floor(reveal * 101)); const definition = useMemo(() => { const bounds: number[] = []; let acc = 0; for (const c of channels) { acc += c.share; bounds.push(acc); } const shade = new Map(channels.map((c, i) => [c.channel, ladder[i % ladder.length]])); const ticks: RingTick[] = Array.from({ length: revealed }, (_, i) => { const deg = i * 3.6 + twist; const rad = (deg * Math.PI) / 180; const slot = bounds.findIndex((b) => i < b); const row = channels[slot === -1 ? channels.length - 1 : slot]; return { channel: row?.channel ?? "", id: i, major: i % 10 === 0, rotate: deg + 180, x: Math.sin(rad), y: Math.cos(rad), }; }); return defineChart({ guides: false, margin: 0, marks: [ vector(ticks, { anchor: "start", headLength: 0, key: "id", length: (d) => (d.major ? 26 : 18), rotate: "rotate", stroke: (d) => shade.get(d.channel) ?? ladder[0] ?? "#f1f0ec", strokeWidth: 2.4, x: "x", y: "y", }), ], scales: { x: { scale: scaleLinear().domain([-1, 1]) }, y: { scale: scaleLinear().domain([-1, 1]) }, }, }); }, [channels, revealed, twist, ladder]); return ( ); }; 55:T2750,"use client"; import { useEffect, useRef, useState } from "react"; import { DotWaffle } from "./charts/dot-waffle"; import { HairlineLine } from "./charts/hairline-line"; import { RungBars } from "./charts/rung-bars"; import { TickRing } from "./charts/tick-ring"; import { DAY_MAX, SCENES } from "./lib/data"; import { DARK, FAINT, INK, LADDER, MUTED, PAPER } from "./lib/tokens"; const CYCLE_MS = 4600; const useCountUp = (target: number, ms = 950) => { // Starts at 0 (matching the not-yet-inked charts around it) and always // resumes from the last painted value, so neither SSR nor a Strict Mode // remount can flash the final count or skip the entrance. const [shown, setShown] = useState(0); const painted = useRef(0); useEffect(() => { const from = painted.current; if (from === target) { return; } let raf = 0; const t0 = performance.now(); const step = (t: number) => { const p = Math.min(1, (t - t0) / ms); const eased = 1 - (1 - p) ** 3; const value = Math.round(from + (target - from) * eased); painted.current = value; setShown(value); if (p < 1) { raf = requestAnimationFrame(step); } }; raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, [target, ms]); return shown; }; // Entrance clock: 0 → 1 over `ms`, driving how much of each chart is inked. const useReveal = (active: boolean, ms: number) => { const [progress, setProgress] = useState(0); useEffect(() => { if (!active) { return; } let raf = 0; const t0 = performance.now(); const step = (t: number) => { const p = Math.min(1, (t - t0) / ms); setProgress(p); if (p < 1) { raf = requestAnimationFrame(step); } }; raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, [active, ms]); return progress; }; const Kicker = ({ children, dark }: { children: string; dark?: boolean }) => ( {children} ); const CardHead = ({ kicker, title, sub, dark, }: { kicker: string; title: string; sub: string; dark?: boolean; }) => (

{kicker}

{title}

{sub}

); const SourceRow = ({ children, dark }: { children: string; dark?: boolean }) => (

{children}

); export const EditorialCharts = () => { const [scene, setScene] = useState(0); // Charts mount after first paint so every visitor gets the full staggered // entrance instead of a server-rendered final state. const [inked, setInked] = useState(false); useEffect(() => { const frame = requestAnimationFrame(() => setInked(true)); const t = setInterval(() => setScene((s) => (s + 1) % SCENES.length), CYCLE_MS); return () => { cancelAnimationFrame(frame); clearInterval(t); }; }, []); const reveal = useReveal(inked, 1500); const s = SCENES[scene]; if (!s) { throw new RangeError("Editorial chart scene index is out of bounds"); } const sessions = useCountUp(s.sessions); return (

{/* Masthead */}

The quarter, drawn in ink

four marks, one grammar, one spring

{SCENES.map((q, i) => ( {q.quarter} ))}

{/* Rung bars */}

{inked && }

TICK MARKS ON A POINT SCALE · STAGGERED SPRING ENTRANCE

{/* Tick ring — the dark card */}

{inked && ( )}

{(sessions / 1000).toFixed(1)}k SESSIONS

{s.channels.map((c, i) => { // Clockwise from noon: channel order sweeps right side first. const spots = [ "left-full top-3 ml-3", "left-full bottom-3 ml-3", "right-full bottom-3 mr-3 text-right", "right-full top-3 mr-3 text-right", ] as const; return (

{c.channel} {c.share}%

); })}

100 VECTOR MARKS · ONE SHADE PER CHANNEL · SPRUNG TWIST

{/* Hairline line */}

{inked && ( )}

LINE + DOT + TEXT MARKS · PATH MORPHS BETWEEN QUARTERS

{/* Dot waffle */}

{inked && }

{s.mix.map((m, i) => (

{m.plan} {m.share}%

))}

DOT MARKS + ORDINAL COLOR SCALE · KEYS CARRY THE PLAN

DEMO DATA · DRAWN BY TANSTACK CHARTS · SPRINGS AND STAGGER BY ITS MOTION RENDERER

); }; 56:Td80,// Three quarters of a fictional product, cycled by the set. Deterministic on // purpose — a refresh must draw the exact same page. export interface PlanRow { plan: string; value: number; } export interface DayRow { day: number; value: number; weekend: boolean; } export interface ChannelRow { channel: string; share: number; } export interface MixRow { plan: string; share: number; } export interface Scene { quarter: string; /** $k MRR per plan. Keep every value divisible by 2: one rung = $2k, and the * rung-bars ladder must count exactly to its label. */ plans: PlanRow[]; days: DayRow[]; channels: ChannelRow[]; sessions: number; mix: MixRow[]; } /* oxlint-disable no-bitwise -- integer hash: xorshift-multiply needs unsigned 32-bit wraparound */ const hash = (n: number) => { let x = (n + 0x9e_37_79_b9) >>> 0; x = Math.imul(x ^ (x >>> 16), 0x4_5d_9f_3b) >>> 0; x = Math.imul(x ^ (x >>> 16), 0x4_5d_9f_3b) >>> 0; return ((x ^ (x >>> 16)) >>> 0) / 0xff_ff_ff_ff; }; /* oxlint-enable no-bitwise */ const days = (seed: number, base: number, slope: number): DayRow[] => Array.from({ length: 30 }, (_, i) => { const weekend = i % 7 === 5 || i % 7 === 6; const wiggle = (hash(seed * 1000 + i) - 0.5) * 16; const value = Math.max(6, Math.round(base + i * slope + wiggle - (weekend ? 11 : 0))); return { day: i + 1, value, weekend }; }); export const SCENES: Scene[] = [ { channels: [ { channel: "ORGANIC", share: 37 }, { channel: "REFERRAL", share: 21 }, { channel: "SOCIAL", share: 14 }, { channel: "PAID", share: 28 }, ], days: days(1, 34, 0.9), mix: [ { plan: "FREE", share: 46 }, { plan: "STARTER", share: 27 }, { plan: "PRO", share: 17 }, { plan: "TEAM", share: 10 }, ], plans: [ { plan: "FREE", value: 38 }, { plan: "STARTER", value: 28 }, { plan: "PRO", value: 22 }, { plan: "TEAM", value: 16 }, { plan: "SCALE", value: 10 }, ], quarter: "Q1", sessions: 41_800, }, { channels: [ { channel: "ORGANIC", share: 41 }, { channel: "REFERRAL", share: 23 }, { channel: "SOCIAL", share: 12 }, { channel: "PAID", share: 24 }, ], days: days(2, 42, 1.15), mix: [ { plan: "FREE", share: 41 }, { plan: "STARTER", share: 29 }, { plan: "PRO", share: 19 }, { plan: "TEAM", share: 11 }, ], plans: [ { plan: "FREE", value: 44 }, { plan: "STARTER", value: 32 }, { plan: "PRO", value: 26 }, { plan: "TEAM", value: 20 }, { plan: "SCALE", value: 14 }, ], quarter: "Q2", sessions: 48_200, }, { channels: [ { channel: "ORGANIC", share: 46 }, { channel: "REFERRAL", share: 24 }, { channel: "SOCIAL", share: 11 }, { channel: "PAID", share: 19 }, ], days: days(3, 52, 1.4), mix: [ { plan: "FREE", share: 34 }, { plan: "STARTER", share: 31 }, { plan: "PRO", share: 22 }, { plan: "TEAM", share: 13 }, ], plans: [ { plan: "FREE", value: 52 }, { plan: "STARTER", value: 36 }, { plan: "PRO", value: 30 }, { plan: "TEAM", value: 24 }, { plan: "SCALE", value: 18 }, ], quarter: "Q3", sessions: 56_400, }, ]; // Shared y ceiling so the line visibly climbs across quarters. export const DAY_MAX = Math.max(...SCENES.flatMap((s) => s.days.map((d) => d.value))); 4e:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tanstack/charts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Fcharts","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/charts"}]]}]}]]}],["$","$L4f",null,{"namespace":"@uicapsule","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"/charts/dot-waffle.tsx","content":"$51","type":"registry:file","target":"uicapsule/editorial-charts/charts/dot-waffle.tsx"},{"path":"/charts/hairline-line.tsx","content":"$52","type":"registry:file","target":"uicapsule/editorial-charts/charts/hairline-line.tsx"},{"path":"/charts/rung-bars.tsx","content":"$53","type":"registry:file","target":"uicapsule/editorial-charts/charts/rung-bars.tsx"},{"path":"/charts/tick-ring.tsx","content":"$54","type":"registry:file","target":"uicapsule/editorial-charts/charts/tick-ring.tsx"},{"path":"/editorial-charts.tsx","content":"$55","type":"registry:file","target":"uicapsule/editorial-charts/editorial-charts.tsx"},{"path":"/lib/data.ts","content":"$56","type":"registry:file","target":"uicapsule/editorial-charts/lib/data.ts"},{"path":"/lib/tokens.ts","content":"// Editorial mono tokens — paper ground, charcoal ink, lightness IS the data.\n// Inspired by print-editorial data graphics; values are our own.\n\nexport const PAPER = \"#f1f0ec\";\nexport const INK = \"#1b1b19\";\nexport const MUTED = \"#8b8a84\";\nexport const FAINT = \"#c2c1bb\";\nexport const HAIR = \"#dbdad3\";\n\n// Ink ladder for multi-series work: most important = darkest.\nexport const LADDER = [\"#1b1b19\", \"#4a4943\", \"#8b8a84\", \"#aeada7\", \"#d0cfc9\"] as const;\n\n// Dark card: ink becomes paper, ladder runs bright → dim.\nexport const DARK = {\n bg: \"#1b1b19\",\n faint: \"#4c4b45\",\n ink: \"#f1f0ec\",\n ladder: [\"#f1f0ec\", \"#c7c6be\", \"#93928b\", \"#5c5b54\"] as const,\n muted: \"#8b8a84\",\n};\n\n// One spring for the whole set — quick in, no bounce to speak of.\nexport const SPRING = {\n damping: 22,\n mass: 1,\n stiffness: 170,\n type: \"spring\",\n} as const;\n","type":"registry:file","target":"uicapsule/editorial-charts/lib/tokens.ts"},{"path":"/preview.tsx","content":"\"use client\";\n\nimport { EditorialCharts } from \"./editorial-charts\";\n\nconst Preview = () => (\n

\n \n

\n);\n\nexport default Preview;\n","type":"registry:file","target":"uicapsule/editorial-charts/preview.tsx"}],"className":"h-[70svh] min-h-80"}]]}]