"use strict";var _jsxruntime = require("react/jsx-runtime");Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var _react = require('react'); var _framermotion = require('framer-motion'); var _three = require('three'); var THREE = _interopRequireWildcard(_three); var _Accordion = require('./components/Accordion'); var _Accordion2 = _interopRequireDefault(_Accordion); var _Split = require('./components/Split'); var _Split2 = _interopRequireDefault(_Split); var _Table = require('./components/Table'); var _Table2 = _interopRequireDefault(_Table); var _Charts = require('./components/Charts'); var _Deck = require('./engine/Deck'); var _Deck2 = _interopRequireDefault(_Deck); var _Slide = require('./engine/Slide'); var _Slide2 = _interopRequireDefault(_Slide); var _DeckContext = require('./engine/DeckContext'); /* Bloomberg: the terminal. The one data-dense, information-first document in a gallery that is otherwise full of airy marketing decks, and that contrast is the whole point of it being here. The register is carried by --radius: 2px, a true black ground, amber and cyan, IBM Plex Mono on every figure, dense rows and hairline rules. It is NOT carried by a Terminal screenshot: none were sourced, because rights on Terminal screen captures are murky and a four-panel Terminal screen is illegible at 1280x720. The "Four panels" slide is the homage instead, built out of type, and its four headings are Bloomberg's own words for what the Terminal holds. THE 3D IS MADE OF DATA. This deck used to carry no WebGL at all, on the argument that a rotating solid next to a labour-market series would be decoration. That is still true of a rotating solid. It is not true of a surface whose every vertex is a published number, which is what slide two now is: four years of the US Treasury par yield curve as a shaded mesh, maturity across, time in depth, height in per cent. The five lit ribs on it are the same five Decembers the cover table prints. See YieldSurface below for the data and for what is interpolated and what is observed. SOURCES, checked 2026-08-07, every one of them from the office that produces the number rather than from a story quoting it: - CPI-U, US city average, all items, not seasonally adjusted, series CUUR0000SA0 / CPIAUCNS. Twelve-month change computed from the December index each year: 278.802, 296.797, 306.746, 315.605, 324.054 give 7.0, 6.5, 3.4, 2.9 and 2.7 per cent. U.S. Bureau of Labor Statistics. - Unemployment rate, seasonally adjusted, series LNS14000000 / UNRATE. December: 3.9, 3.5, 3.8, 4.1, 4.4. Note December 2023 is 3.8 in the current vintage, not the 3.7 that was first published and is still widely repeated. U.S. Bureau of Labor Statistics. - Federal funds target range at each year end, top of range: 0.25, 4.50, 5.50, 4.50, 3.75. Federal Reserve Board. 2021 sits at 0.25 because the Committee did not move that year. The 3.50 to 3.75 range was set on 10 December 2025. - Total nonfarm employment, seasonally adjusted, series CES0000000001 / PAYEMS, December to December: +1.985m, -9.246m, +7.268m, +4.526m, +2.515m, +1.459m, +116,000. U.S. Bureau of Labor Statistics. - 2,700 news professionals and analysts, 120+ global news bureaus, 70+ countries: Bloomberg's own professional.bloomberg.com news page. Note it says 120+ BUREAUS and 70+ COUNTRIES. The line that circulates elsewhere, "2,700 journalists in 120 countries", is not what Bloomberg's page says, so this deck does not say it either. - The four panel headings and their sentences, plus 350,000 decision makers and 350 Bloomberg Intelligence research professionals: professional.bloomberg.com/products/bloomberg-terminal/. - The Bloomberg Billionaires Index is updated at the close of every trading day in New York: bloomberg.com/billionaires. - Daily Treasury Par Yield Curve Rates, U.S. Department of the Treasury, pulled from Treasury's own CSV endpoint for calendar years 2021 to 2025 rather than from any market data vendor. See the CURVES block below. LEFT OUT ON PURPOSE, and the "Omitted" slide says so out loud: Bloomberg L.P. revenue and Terminal subscription counts and prices. Bloomberg is private and every figure in circulation for those is an outside estimate. The closing line is our own editorial position and is attributed to nobody but us. */ /** * The brand's real wordmark, from public/gallery/bloomberg/logo.svg. * * An with a hard monochrome filter, NOT a CSS mask. The mask was tried * first and rendered nothing: several of these SVGs paint through and * clip paths, so their alpha channel is empty when used as a mask source even * though the file itself displays perfectly. brightness(0) flattens whatever * the file contains to solid black, which also neutralises the * currentColor-driven files, and invert(1) lifts it to white for dark grounds. */ function Wordmark({ height = 22, align = "flex-start" }) { return ( _jsxruntime.jsx.call(void 0, 'img', { src: "/gallery/bloomberg/logo.svg", alt: "Bloomberg logo" , width: Math.round(height * 5.42), height: height, style: { display: "block", height, // Explicit width + alignSelf: inside a column flex the default // align-items:stretch widens the replaced element and floats it to the // middle of the slide instead of sitting on the left gutter. alignSelf: align, marginInline: align === "center" ? "auto" : undefined, opacity: 0.9, filter: "brightness(0) invert(1)" },} ) ); } const MONO = "var(--font-mono)"; /** Shared chrome for the mono micro-labels the whole deck is ruled with. */ function Meta({ children, tone = "faint", style }) { const color = tone === "cyan" ? "var(--cyan)" : tone === "amber" ? "var(--primary)" : "var(--fg-faint)"; return ( _jsxruntime.jsx.call(void 0, 'span', { style: { fontFamily: MONO, fontSize: 11.5, fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", color, ...style }, children: children }) ); } /** A figure cell: .dtable sets tabular numerals but not the mono face. */ function Num({ children, lit }) { return _jsxruntime.jsx.call(void 0, 'span', { style: { fontFamily: MONO, color: lit ? "var(--primary)" : undefined }, children: children}); } /** * The instrument panel: a .mat card with a ruled mono title bar and a live * square. Four of these tiled 2x2 is this deck's answer to a Terminal screen, * and the same shell frames the chart and the rejected-figures list so the * whole deck reads as one instrument rather than as themed slides. */ function Panel({ label, tag, children, style, bodyStyle } ) { return ( _jsxruntime.jsxs.call(void 0, 'div', { className: "mat", style: { borderRadius: "var(--radius)", display: "flex", flexDirection: "column", minWidth: 0, ...style }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", alignItems: "center", gap: 10, padding: "10px clamp(14px, 1.4vw, 18px)", borderBottom: "1px solid var(--hair-2)", background: "rgba(255,255,255,0.03)" }, children: [ _jsxruntime.jsx.call(void 0, 'span', { style: { display: "block", width: 7, height: 7, background: "var(--primary)" },} ) , _jsxruntime.jsx.call(void 0, Meta, { children: label}) , tag ? _jsxruntime.jsx.call(void 0, Meta, { tone: "cyan", style: { marginLeft: "auto", letterSpacing: "0.1em" }, children: tag}) : null ]}) , _jsxruntime.jsx.call(void 0, 'div', { style: { flex: 1, display: "flex", flexDirection: "column", gap: 12, padding: "clamp(16px, 1.9vw, 26px)", ...bodyStyle }, children: children }) ]}) ); } /* The four tiled panels are taller than their two lines of copy, and a heading with a paragraph glued under it left the bottom half of each panel dead. Pinning the description to the panel foot spreads the ink across the tile the way a real instrument window does. */ const PANEL_BODY = { justifyContent: "space-between", gap: 18 }; /* The tape. Marquee is Nike's signature in this set, so this is hand-rolled: one flex track holding the items twice, translated by exactly half its own width, which loops seamlessly at any content length. Under isStatic (poster stills and PDF/PPTX export) it simply does not animate, so it freezes at offset zero with the first item flush left rather than at Marquee's arbitrary mid-scroll position. Every value on it is on a slide of this deck with its source printed. */ const TAPE = [ { k: "CPI-U 12M", v: "2.7%", d: "-0.2" }, { k: "Unemployment", v: "4.4%", d: "+0.3" }, { k: "Fed funds, top", v: "3.75%", d: "-0.75" }, { k: "Payrolls 12M", v: "+116,000" }, { k: "UST 1M", v: "3.74%" }, { k: "Dec 2025", v: "BLS / FOMC / UST" } ]; function Tape({ height = 44 }) { const { isStatic } = _DeckContext.useDeck.call(void 0, ); const run = [...TAPE, ...TAPE]; return ( _jsxruntime.jsx.call(void 0, 'div', { style: { position: "relative", height, overflow: "hidden", display: "flex", alignItems: "center", borderTop: "1px solid var(--hair)", borderBottom: "1px solid var(--hair)", background: "rgba(255,255,255,0.025)" }, children: _jsxruntime.jsx.call(void 0, _framermotion.motion.div, { style: { display: "flex", width: "max-content" }, animate: isStatic ? undefined : { x: ["0%", "-50%"] }, transition: { duration: 34, ease: "linear", repeat: Infinity }, children: run.map((t, i) => ( _jsxruntime.jsxs.call(void 0, 'span', { style: { display: "inline-flex", alignItems: "baseline", gap: 12, padding: "0 26px", whiteSpace: "nowrap", borderRight: "1px solid var(--hair-2)", fontFamily: MONO, fontSize: 12.5, letterSpacing: "0.1em" }, children: [ _jsxruntime.jsx.call(void 0, 'span', { style: { color: "var(--fg-faint)", textTransform: "uppercase" }, children: t.k}) , _jsxruntime.jsx.call(void 0, 'span', { style: { color: "var(--fg)", fontWeight: 600 }, children: t.v}) , t.d ? ( _jsxruntime.jsx.call(void 0, 'span', { style: { color: t.d.startsWith("-") ? "var(--cyan)" : "var(--primary)", fontWeight: 600 }, children: t.d}) ) : null ]}, i) )) }) }) ); } /** Change in total nonfarm employment, December to December, in millions. */ const PAYROLLS = [1.985, -9.246, 7.268, 4.526, 2.515, 1.459, 0.116]; const PAYROLL_YEARS = ["2019", "2020", "2021", "2022", "2023", "2024", "2025"]; const CHART_H = 292; /** * Where zero sits inside the plot, in pixels from the top of the chart. * * scales min to max and draws no y axis, so on a series that * crosses zero the reader cannot tell that 2020 is a LOSS of 9.2 million * rather than a small gain: the flat 2025 tail renders halfway up the box and * looks high. A baseline fixes that, and it has to be computed rather than * eyeballed. This repeats the component's own projection (a 120-unit viewBox * with 5 units of padding top and bottom, see components/Charts.tsx) so it * stays correct if the series changes. */ const ZERO_TOP = (() => { const min = Math.min(...PAYROLLS); const max = Math.max(...PAYROLLS); return ((120 - ((0 - min) / (max - min)) * 110 - 5) / 120) * CHART_H; })(); /** A mono figure over a mono label: the newsroom lower third and the chart key. */ function Fig({ v, k, size = "clamp(28px, 3.4vw, 46px)" }) { return ( _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [ _jsxruntime.jsx.call(void 0, 'span', { style: { fontFamily: MONO, fontWeight: 600, fontSize: size, lineHeight: 1, color: "var(--primary)" }, children: v }) , _jsxruntime.jsx.call(void 0, Meta, { style: { letterSpacing: "0.14em" }, children: k}) ]}) ); } /* ================================================================== THE YIELD SURFACE WHAT THE MESH IS MADE OF. Daily Treasury Par Yield Curve Rates, published by the U.S. Department of the Treasury, which is the same office that publishes the numbers everyone else quotes as "the yield curve". The rows below are the LAST BUSINESS DAY OF EVERY MONTH from December 2021 to December 2025: 49 curves, 12 tenors each, 588 published figures, none of them rounded, reordered or filled in. Where a month end fell on a weekend the last trading day of that month is used, which is why some rows are dated the 29th or the 30th. The twelve tenors are the ones Treasury has quoted continuously across the whole window: 1, 2, 3 and 6 months, then 1, 2, 3, 5, 7, 10, 20 and 30 years. The 4-month bill (from October 2022) and the 1.5-month bill (later still) are deliberately left out, because a column that only exists for part of the window would put a hole in the surface. WHAT IS OBSERVED AND WHAT IS DRAWN. Across MATURITY the mesh runs a Catmull-Rom spline through the twelve quoted tenors, which is faithful rather than invented: Treasury's own par yield curve is a smooth curve fit to those quotes, not a twelve-segment polyline. Across TIME the mesh runs a MONOTONE cubic between consecutive month ends, which cannot overshoot, so no point on the surface sits above the higher of the two month ends it lies between or below the lower. A plain spline in the time direction would have drawn peaks and troughs in interest rates that never happened, which is exactly the failure this deck spends a whole slide refusing. THE FIVE LIT RIBS are the five Decembers on slide one, drawn as tubes lying on the surface. They are the only elements that are not part of the mesh, and they exist so the object reads as this deck's own scoreboard seen from the side rather than as generic terrain. THE TENOR AXIS IS ORDINAL. Each tenor gets equal width, which is how a yield curve is drawn on a terminal and everywhere else. The axis labels say 1M, 2Y, 10Y and 30Y so nobody can read it as linear in years. ================================================================== */ /** The tenors, in Treasury's own column order. */ const TENORS = ["1M", "2M", "3M", "6M", "1Y", "2Y", "3Y", "5Y", "7Y", "10Y", "20Y", "30Y"]; /** Par yield in per cent. One row per month end, oldest first. */ const CURVES = [ [0.06, 0.05, 0.06, 0.19, 0.39, 0.73, 0.97, 1.26, 1.44, 1.52, 1.94, 1.9], // 2021-12-31 [0.03, 0.13, 0.22, 0.49, 0.78, 1.18, 1.39, 1.62, 1.75, 1.79, 2.17, 2.11], // 2022-01-31 [0.06, 0.2, 0.35, 0.69, 1.01, 1.44, 1.62, 1.71, 1.81, 1.83, 2.25, 2.17], // 2022-02-28 [0.17, 0.35, 0.52, 1.06, 1.63, 2.28, 2.45, 2.42, 2.4, 2.32, 2.59, 2.44], // 2022-03-31 [0.37, 0.73, 0.85, 1.41, 2.1, 2.7, 2.87, 2.92, 2.94, 2.89, 3.14, 2.96], // 2022-04-29 [0.73, 0.89, 1.16, 1.64, 2.08, 2.53, 2.71, 2.81, 2.87, 2.85, 3.28, 3.07], // 2022-05-31 [1.28, 1.68, 1.72, 2.51, 2.8, 2.92, 2.99, 3.01, 3.04, 2.98, 3.38, 3.14], // 2022-06-30 [2.22, 2.28, 2.41, 2.91, 2.98, 2.89, 2.83, 2.7, 2.7, 2.67, 3.2, 3.0], // 2022-07-29 [2.4, 2.72, 2.96, 3.32, 3.5, 3.45, 3.46, 3.3, 3.25, 3.15, 3.53, 3.27], // 2022-08-31 [2.79, 3.2, 3.33, 3.92, 4.05, 4.22, 4.25, 4.06, 3.97, 3.83, 4.08, 3.79], // 2022-09-30 [3.73, 4.0, 4.22, 4.57, 4.66, 4.51, 4.45, 4.27, 4.18, 4.1, 4.44, 4.22], // 2022-10-31 [4.07, 4.25, 4.37, 4.7, 4.74, 4.38, 4.13, 3.82, 3.76, 3.68, 4.0, 3.8], // 2022-11-30 [4.12, 4.41, 4.42, 4.76, 4.73, 4.41, 4.22, 3.99, 3.96, 3.88, 4.14, 3.97], // 2022-12-30 [4.58, 4.64, 4.7, 4.8, 4.68, 4.21, 3.9, 3.63, 3.59, 3.52, 3.78, 3.65], // 2023-01-31 [4.65, 4.81, 4.88, 5.17, 5.02, 4.81, 4.51, 4.18, 4.07, 3.92, 4.1, 3.93], // 2023-02-28 [4.74, 4.79, 4.85, 4.94, 4.64, 4.06, 3.81, 3.6, 3.55, 3.48, 3.81, 3.67], // 2023-03-31 [4.35, 5.14, 5.1, 5.06, 4.8, 4.04, 3.75, 3.51, 3.49, 3.44, 3.8, 3.67], // 2023-04-28 [5.28, 5.37, 5.52, 5.46, 5.18, 4.4, 4.04, 3.74, 3.69, 3.64, 4.01, 3.85], // 2023-05-31 [5.24, 5.39, 5.43, 5.47, 5.4, 4.87, 4.49, 4.13, 3.97, 3.81, 4.06, 3.85], // 2023-06-30 [5.48, 5.54, 5.55, 5.53, 5.37, 4.88, 4.51, 4.18, 4.08, 3.97, 4.22, 4.02], // 2023-07-31 [5.52, 5.55, 5.56, 5.48, 5.37, 4.85, 4.54, 4.23, 4.19, 4.09, 4.39, 4.2], // 2023-08-31 [5.55, 5.6, 5.55, 5.53, 5.46, 5.03, 4.8, 4.6, 4.61, 4.59, 4.92, 4.73], // 2023-09-29 [5.56, 5.57, 5.59, 5.54, 5.44, 5.07, 4.9, 4.82, 4.89, 4.88, 5.21, 5.04], // 2023-10-31 [5.56, 5.54, 5.45, 5.38, 5.16, 4.73, 4.48, 4.31, 4.38, 4.37, 4.72, 4.54], // 2023-11-30 [5.6, 5.59, 5.4, 5.26, 4.79, 4.23, 4.01, 3.84, 3.88, 3.88, 4.2, 4.03], // 2023-12-29 [5.53, 5.46, 5.42, 5.18, 4.73, 4.27, 4.05, 3.91, 3.95, 3.99, 4.34, 4.22], // 2024-01-31 [5.53, 5.5, 5.45, 5.3, 5.01, 4.64, 4.43, 4.26, 4.28, 4.25, 4.51, 4.38], // 2024-02-29 [5.49, 5.48, 5.46, 5.38, 5.03, 4.59, 4.4, 4.21, 4.2, 4.2, 4.45, 4.34], // 2024-03-28 [5.48, 5.51, 5.46, 5.44, 5.25, 5.04, 4.87, 4.72, 4.71, 4.69, 4.9, 4.79], // 2024-04-30 [5.48, 5.48, 5.46, 5.42, 5.18, 4.89, 4.69, 4.52, 4.52, 4.51, 4.73, 4.65], // 2024-05-31 [5.47, 5.47, 5.48, 5.33, 5.09, 4.71, 4.52, 4.33, 4.33, 4.36, 4.61, 4.51], // 2024-06-28 [5.49, 5.51, 5.41, 5.14, 4.73, 4.29, 4.1, 3.97, 4.0, 4.09, 4.44, 4.35], // 2024-07-31 [5.41, 5.32, 5.21, 4.89, 4.38, 3.91, 3.79, 3.71, 3.8, 3.91, 4.28, 4.2], // 2024-08-30 [4.93, 4.87, 4.73, 4.38, 3.98, 3.66, 3.58, 3.58, 3.67, 3.81, 4.19, 4.14], // 2024-09-30 [4.76, 4.76, 4.64, 4.43, 4.27, 4.16, 4.12, 4.15, 4.21, 4.28, 4.58, 4.47], // 2024-10-31 [4.76, 4.69, 4.58, 4.42, 4.3, 4.13, 4.1, 4.05, 4.1, 4.18, 4.45, 4.36], // 2024-11-29 [4.4, 4.39, 4.37, 4.24, 4.16, 4.25, 4.27, 4.38, 4.48, 4.58, 4.86, 4.78], // 2024-12-31 [4.37, 4.37, 4.31, 4.28, 4.17, 4.22, 4.27, 4.36, 4.47, 4.58, 4.88, 4.83], // 2025-01-31 [4.38, 4.38, 4.32, 4.25, 4.08, 3.99, 3.99, 4.03, 4.14, 4.24, 4.55, 4.51], // 2025-02-28 [4.38, 4.35, 4.32, 4.23, 4.03, 3.89, 3.89, 3.96, 4.09, 4.23, 4.62, 4.59], // 2025-03-31 [4.35, 4.36, 4.31, 4.19, 3.85, 3.6, 3.58, 3.72, 3.93, 4.17, 4.68, 4.66], // 2025-04-30 [4.33, 4.35, 4.36, 4.36, 4.11, 3.89, 3.87, 3.96, 4.18, 4.41, 4.93, 4.92], // 2025-05-30 [4.28, 4.45, 4.41, 4.29, 3.96, 3.72, 3.68, 3.79, 3.98, 4.24, 4.79, 4.78], // 2025-06-30 [4.49, 4.46, 4.41, 4.31, 4.1, 3.94, 3.89, 3.96, 4.14, 4.37, 4.89, 4.89], // 2025-07-31 [4.41, 4.3, 4.23, 4.01, 3.83, 3.59, 3.58, 3.68, 3.92, 4.23, 4.86, 4.92], // 2025-08-29 [4.2, 4.15, 4.02, 3.83, 3.68, 3.6, 3.61, 3.74, 3.93, 4.16, 4.71, 4.73], // 2025-09-30 [4.06, 4.04, 3.89, 3.79, 3.7, 3.6, 3.6, 3.71, 3.89, 4.11, 4.65, 4.67], // 2025-10-31 [4.05, 3.99, 3.88, 3.74, 3.61, 3.47, 3.49, 3.59, 3.78, 4.02, 4.62, 4.67], // 2025-11-28 [3.74, 3.67, 3.67, 3.59, 3.48, 3.47, 3.55, 3.73, 3.94, 4.18, 4.79, 4.84] // 2025-12-31 ]; /** Row indices of the five Decembers. The rows are consecutive months. */ const DECEMBERS = [0, 12, 24, 36, 48]; /** * The scene. A shaded amber mesh inside a cyan cage on a true black ground, * swinging through about 32 degrees. * * WHY IT IS SHADED AND NOT A BARE WIREFRAME. A wireframe of a surface this * size photographs as a scribble: at 1280x720 the wires are a pixel wide and * the eye gets no sense of which way anything faces. The solid underneath is * what carries the form, the wire on top is what tells you the solid is a * grid of readings, and neither works without the other. * * WHY THE ENVIRONMENT IS GENERATED. There is no network in this sandbox, so * there is no HDRI to fetch, and a MeshStandardMaterial with any metalness * and nothing to reflect renders flat. A 32x256 canvas painted with a dark * room and one bright overhead band, wrapped as an equirectangular * CanvasTexture and pushed through PMREMGenerator (core three, not * examples), is what puts the long specular sheen along the 2023 ridge. * Metalness is held down at 0.3: the ground is true black, and a more * metallic surface over a black room reflects nothing and reads as a hole. * * WHY IT SWINGS RATHER THAN SPINS. The grid poster and the PDF and PPTX * exports are stills grabbed at an arbitrary frame. A full rotation would * put the axis labels backwards and the 2023 wall behind the 2021 floor for * half of every cycle. A 32 degree swing keeps every frame a good frame. */ function YieldSurface() { const host = _react.useRef(null); _react.useEffect.call(void 0, () => { const el = host.current; if (!el) { return; } const ROWS = CURVES.length; // 49 month ends const COLS = TENORS.length; // 12 tenors const SPAN_X = 6.8; // time, left to right const SPAN_Z = 4.8; // maturity, front to back const CEIL = 6; // per cent at the top of the cage const YS = 0.44; // world units per percentage point // 3 samples per month across time, 8 across each tenor gap. const NX = (ROWS - 1) * 3 + 1; const NZ = (COLS - 1) * 8 + 1; const xAt = (ix) => -SPAN_X / 2 + (ix / (NX - 1)) * SPAN_X; const zAt = (iz) => SPAN_Z / 2 - (iz / (NZ - 1)) * SPAN_Z; // Catmull-Rom along the tenor axis, clamped at both ends. const spline = (row, v) => { const i = Math.min(COLS - 2, Math.max(0, Math.floor(v))); const t = Math.min(1, Math.max(0, v - i)); const p0 = row[Math.max(0, i - 1)]; const p1 = row[i]; const p2 = row[i + 1]; const p3 = row[Math.min(COLS - 1, i + 2)]; const t2 = t * t; return ( 0.5 * (2 * p1 + (p2 - p0) * t + (2 * p0 - 5 * p1 + 4 * p2 - p3) * t2 + (3 * p1 - 3 * p2 + p3 - p0) * t2 * t) ); }; /* MONOTONE CUBIC (Fritsch-Carlson) along the time axis, and the choice is the whole honesty argument of this object. - A plain Catmull-Rom here overshoots: between two month ends it draws peaks and troughs in interest rates that were never printed. - Straight linear interpolation, which is what this was first, cannot overshoot but leaves a crease at every one of the 49 rows. Rendered with smooth normals those creases pick up 49 specular stripes and the object photographs as folded fabric rather than as a surface. Fritsch-Carlson is the one that is both: the tangent at a month end is zeroed wherever the series turns and is otherwise the harmonic mean of the two neighbouring slopes, which makes every segment monotone. So the surface is smooth AND no point on it is above the higher of the two month ends it lies between, or below the lower. */ const hm = (a, b) => (a * b <= 0 ? 0 : (2 * a * b) / (a + b)); const rateAt = (u, v) => { const i = Math.min(ROWS - 2, Math.max(0, Math.floor(u))); const t = Math.min(1, Math.max(0, u - i)); const ym = spline(CURVES[Math.max(0, i - 1)], v); const y0 = spline(CURVES[i], v); const y1 = spline(CURVES[i + 1], v); const y2 = spline(CURVES[Math.min(ROWS - 1, i + 2)], v); const d0 = y1 - y0; const m0 = i === 0 ? d0 : hm(y0 - ym, d0); const m1 = i + 2 > ROWS - 1 ? d0 : hm(d0, y2 - y1); const t2 = t * t; const t3 = t2 * t; return ( (2 * t3 - 3 * t2 + 1) * y0 + (t3 - 2 * t2 + t) * m0 + (-2 * t3 + 3 * t2) * y1 + (t3 - t2) * m1 ); }; const height = (ix, iz) => rateAt(((ix / (NX - 1)) * (ROWS - 1)), ((iz / (NZ - 1)) * (COLS - 1))); // The colour ramp. Deep bronze at the zero floor through to lit amber at // the top of the range, so the height is legible even in a flat frame. // Built in sRGB and read back as linear, which is what the vertex colour // buffer is interpreted as. const RAMP = [ { t: 0, c: new THREE.Color().setHex(0x3a1a06, THREE.SRGBColorSpace) }, { t: 0.34, c: new THREE.Color().setHex(0x9c540c, THREE.SRGBColorSpace) }, { t: 0.72, c: new THREE.Color().setHex(0xe07d10, THREE.SRGBColorSpace) }, { t: 1, c: new THREE.Color().setHex(0xffab3d, THREE.SRGBColorSpace) } ]; const tint = (rate) => { const t = Math.min(1, Math.max(0, rate / 5.6)); let i = 0; while (i < RAMP.length - 2 && t > RAMP[i + 1].t) { i += 1; } const a = RAMP[i]; const b = RAMP[i + 1]; const f = (t - a.t) / (b.t - a.t); return [a.c.r + (b.c.r - a.c.r) * f, a.c.g + (b.c.g - a.c.g) * f, a.c.b + (b.c.b - a.c.b) * f]; }; /** How far the wire and the ribs stand off the mesh they trace. */ const lift = 0.012; const positions = new Float32Array(NX * NZ * 3); const colors = new Float32Array(NX * NZ * 3); for (let iz = 0; iz < NZ; iz += 1) { for (let ix = 0; ix < NX; ix += 1) { const k = (iz * NX + ix) * 3; const r = height(ix, iz); positions[k] = xAt(ix); positions[k + 1] = r * YS; positions[k + 2] = zAt(iz); const rgb = tint(r); colors[k] = rgb[0]; colors[k + 1] = rgb[1]; colors[k + 2] = rgb[2]; } } const index = new Uint32Array((NX - 1) * (NZ - 1) * 6); let w = 0; for (let iz = 0; iz < NZ - 1; iz += 1) { for (let ix = 0; ix < NX - 1; ix += 1) { const a = iz * NX + ix; const b = a + 1; const c = a + NX; const d = c + 1; index[w] = a; index[w + 1] = b; index[w + 2] = c; index[w + 3] = b; index[w + 4] = d; index[w + 5] = c; w += 6; } } const surfaceGeo = new THREE.BufferGeometry(); surfaceGeo.setAttribute("position", new THREE.BufferAttribute(positions, 3)); surfaceGeo.setAttribute("color", new THREE.BufferAttribute(colors, 3)); surfaceGeo.setIndex(new THREE.BufferAttribute(index, 1)); surfaceGeo.computeVertexNormals(); /* THE SKIRT, and it is the difference between a surface and a ribbon. The first pass drew the mesh on its own and it photographed as a sheet of orange fabric flapping across the slide: no volume, no base, nothing to say what the height was measured FROM. Dropping every boundary vertex to y=0 turns the mesh into a solid block cut off at zero per cent, which is what a terminal surface plot actually looks like, and it gives the object a silhouette. Single-sided, so the two walls facing away from the camera cull and never fog the interior. */ const skirtPts = []; const skirtCols = []; const wall = ( ax, ay, az, bx, by, bz, flip, ra, rb ) => { const p = [ [ax, ay, az], [bx, by, bz], [ax, 0, az], [bx, by, bz], [bx, 0, bz], [ax, 0, az] ]; const order = flip ? [0, 2, 1, 3, 5, 4] : [0, 1, 2, 3, 4, 5]; const rates = [ra, rb, ra, rb, rb, ra]; order.forEach((oi, n) => { skirtPts.push(p[oi][0], p[oi][1], p[oi][2]); // The cut face is darker than the top, and it fades toward the floor, // which is what stops the block reading as a flat orange slab. const rgb = tint(rates[oi] * (n % 3 === 2 || p[oi][1] === 0 ? 0.25 : 0.62)); skirtCols.push(rgb[0] * 0.6, rgb[1] * 0.6, rgb[2] * 0.6); }); }; for (let ix = 0; ix < NX - 1; ix += 1) { const ra = height(ix, 0); const rb = height(ix + 1, 0); wall(xAt(ix), ra * YS, zAt(0), xAt(ix + 1), rb * YS, zAt(0), false, ra, rb); const ca = height(ix, NZ - 1); const cb = height(ix + 1, NZ - 1); wall(xAt(ix), ca * YS, zAt(NZ - 1), xAt(ix + 1), cb * YS, zAt(NZ - 1), true, ca, cb); } for (let iz = 0; iz < NZ - 1; iz += 1) { const ra = height(0, iz); const rb = height(0, iz + 1); wall(xAt(0), ra * YS, zAt(iz), xAt(0), rb * YS, zAt(iz + 1), true, ra, rb); const ca = height(NX - 1, iz); const cb = height(NX - 1, iz + 1); wall(xAt(NX - 1), ca * YS, zAt(iz), xAt(NX - 1), cb * YS, zAt(iz + 1), false, ca, cb); } const skirtGeo = new THREE.BufferGeometry(); skirtGeo.setAttribute("position", new THREE.Float32BufferAttribute(skirtPts, 3)); skirtGeo.setAttribute("color", new THREE.Float32BufferAttribute(skirtCols, 3)); skirtGeo.computeVertexNormals(); /* The lit perimeter. One bright line around the top edge of the block, so the silhouette survives at contact-sheet size. */ const edgePts = []; for (let ix = 0; ix < NX - 1; ix += 1) { edgePts.push(xAt(ix), height(ix, 0) * YS + lift, zAt(0)); edgePts.push(xAt(ix + 1), height(ix + 1, 0) * YS + lift, zAt(0)); edgePts.push(xAt(ix), height(ix, NZ - 1) * YS + lift, zAt(NZ - 1)); edgePts.push(xAt(ix + 1), height(ix + 1, NZ - 1) * YS + lift, zAt(NZ - 1)); } for (let iz = 0; iz < NZ - 1; iz += 1) { edgePts.push(xAt(0), height(0, iz) * YS + lift, zAt(iz)); edgePts.push(xAt(0), height(0, iz + 1) * YS + lift, zAt(iz + 1)); edgePts.push(xAt(NX - 1), height(NX - 1, iz) * YS + lift, zAt(iz)); edgePts.push(xAt(NX - 1), height(NX - 1, iz + 1) * YS + lift, zAt(iz + 1)); } const edgeGeo = new THREE.BufferGeometry(); edgeGeo.setAttribute("position", new THREE.Float32BufferAttribute(edgePts, 3)); const scene = new THREE.Scene(); /* A LONG LENS, high and back. A 30 degree lens at eleven units put so much perspective into a six-unit-wide block that the near end doubled the size of the far end and the time axis stopped reading as evenly spaced. A 24 degree lens at fifteen is nearly axonometric, which is what a plotted surface should be. */ const camera = new THREE.PerspectiveCamera(24, 1, 0.1, 200); camera.position.set(0, 8.2, 15.2); camera.lookAt(0, 0.25, 0); const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.06; renderer.domElement.style.display = "block"; el.appendChild(renderer.domElement); // The generated studio: a dark room with one overhead band. const sky = document.createElement("canvas"); sky.width = 32; sky.height = 256; const sctx = sky.getContext("2d"); if (sctx) { const grad = sctx.createLinearGradient(0, 0, 0, 256); grad.addColorStop(0, "#20232a"); grad.addColorStop(0.14, "#525a68"); grad.addColorStop(0.22, "#ffffff"); grad.addColorStop(0.36, "#ffffff"); grad.addColorStop(0.48, "#39404b"); grad.addColorStop(0.64, "#8d9096"); grad.addColorStop(0.76, "#101216"); grad.addColorStop(1, "#030304"); sctx.fillStyle = grad; sctx.fillRect(0, 0, 32, 256); } const skyTex = new THREE.CanvasTexture(sky); skyTex.mapping = THREE.EquirectangularReflectionMapping; skyTex.colorSpace = THREE.SRGBColorSpace; const pmrem = new THREE.PMREMGenerator(renderer); const envRT = pmrem.fromEquirectangular(skyTex); scene.environment = envRT.texture; const surfaceMat = new THREE.MeshStandardMaterial({ vertexColors: true, metalness: 0.3, roughness: 0.34, envMapIntensity: 1.05, side: THREE.DoubleSide, // The wire sits on the same vertices as the mesh, so without this the // two z-fight and the grid strobes into a dotted mess as it turns. polygonOffset: true, polygonOffsetFactor: 1.4, polygonOffsetUnits: 1.4 }); const surface = new THREE.Mesh(surfaceGeo, surfaceMat); const skirtMat = new THREE.MeshStandardMaterial({ vertexColors: true, metalness: 0.24, roughness: 0.58, envMapIntensity: 0.7, side: THREE.FrontSide }); const edgeMat = new THREE.LineBasicMaterial({ color: 0xffdcb0, transparent: true, opacity: 0.85 }); const rig = new THREE.Group(); rig.add(surface); rig.add(new THREE.Mesh(skirtGeo, skirtMat)); rig.add(new THREE.LineSegments(edgeGeo, edgeMat)); /* The wire: one line per tenor running the length of the window, one line per quarter end running across the tenors. Drawn on the mesh vertices themselves rather than on a regular grid, so every crossing is a published reading. */ const wirePts = []; for (let j = 0; j < COLS; j += 1) { const iz = j * 8; for (let ix = 0; ix < NX - 1; ix += 1) { wirePts.push(xAt(ix), height(ix, iz) * YS + lift, zAt(iz)); wirePts.push(xAt(ix + 1), height(ix + 1, iz) * YS + lift, zAt(iz)); } } for (let m = 0; m < ROWS; m += 3) { const ix = m * 3; for (let iz = 0; iz < NZ - 1; iz += 1) { wirePts.push(xAt(ix), height(ix, iz) * YS + lift, zAt(iz)); wirePts.push(xAt(ix), height(ix, iz + 1) * YS + lift, zAt(iz + 1)); } } const wireGeo = new THREE.BufferGeometry(); wireGeo.setAttribute("position", new THREE.Float32BufferAttribute(wirePts, 3)); const wireMat = new THREE.LineBasicMaterial({ color: 0xffcf94, transparent: true, opacity: 0.34 }); rig.add(new THREE.LineSegments(wireGeo, wireMat)); /* The five Decembers, as tubes lying on the surface. Self-luminous on purpose: they are the one thing on the object that has to survive being small in a contact sheet. */ // Pale and lit rather than amber and lit. At the surface's own colour and // a 0.024 radius the five ribs disappeared into it completely: the one // thing on the object that has to survive being small was the one thing // you could not see. const ribMat = new THREE.MeshStandardMaterial({ color: 0xffe4bc, metalness: 0.4, roughness: 0.2, emissive: 0xffb454, emissiveIntensity: 0.85, envMapIntensity: 1.6 }); const ribGeos = []; DECEMBERS.forEach((m) => { const ix = m * 3; const pts = []; for (let iz = 0; iz < NZ; iz += 2) { pts.push(new THREE.Vector3(xAt(ix), height(ix, iz) * YS + 0.026, zAt(iz))); } const geo = new THREE.TubeGeometry(new THREE.CatmullRomCurve3(pts), 120, 0.042, 8, false); ribGeos.push(geo); rig.add(new THREE.Mesh(geo, ribMat)); }); /* The cage, in the deck's second signal. Two walls and a floor outline, ruled at every whole percentage point, which is what gives the height axis a scale and stops the mesh reading as abstract terrain. */ const cagePts = []; const x0 = -SPAN_X / 2; const x1 = SPAN_X / 2; const z0 = SPAN_Z / 2; const z1 = -SPAN_Z / 2; for (let p = 0; p <= CEIL; p += 1) { const y = p * YS; cagePts.push(x0, y, z1, x1, y, z1); // back wall cagePts.push(x0, y, z0, x0, y, z1); // left wall } cagePts.push(x0, 0, z0, x1, 0, z0); // floor, front edge cagePts.push(x1, 0, z0, x1, 0, z1); // floor, right edge cagePts.push(x0, 0, z1, x0, CEIL * YS, z1); // the corner post cagePts.push(x1, 0, z1, x1, CEIL * YS, z1); // A floor ruled at the five Decembers and the four labelled tenors. This // is what makes the December 2021 end read as sitting ON zero rather // than floating somewhere near it. DECEMBERS.forEach((m) => { const x = -SPAN_X / 2 + ((m * 3) / (NX - 1)) * SPAN_X; cagePts.push(x, 0, z0, x, 0, z1); }); [0, 5, 9, 11].forEach((j) => { const z = zAt(j * 8); cagePts.push(x0, 0, z, x1, 0, z); }); const cageGeo = new THREE.BufferGeometry(); cageGeo.setAttribute("position", new THREE.Float32BufferAttribute(cagePts, 3)); const cageMat = new THREE.LineBasicMaterial({ color: 0x2fc3f0, transparent: true, opacity: 0.4 }); rig.add(new THREE.LineSegments(cageGeo, cageMat)); /* Axis labels. No font loader in the sandbox, so each label is drawn on its own canvas and hung on a Sprite, which is the one place an unlit material belongs: these are chrome, not surface. depthTest is off so a label never half-disappears behind the mesh as the rig swings. */ const labelTex = []; const labelMat = []; const measure = document.createElement("canvas").getContext("2d"); const FONT = "600 34px 'IBM Plex Mono', ui-monospace, monospace"; const label = (text, color, x, y, z, h = 0.26) => { if (!measure) { return; } measure.font = FONT; const wpx = Math.max(24, Math.ceil(measure.measureText(text).width)) + 14; const c = document.createElement("canvas"); c.width = wpx; c.height = 52; const g = c.getContext("2d"); if (g) { g.font = FONT; g.textAlign = "center"; g.textBaseline = "middle"; g.fillStyle = color; g.fillText(text, wpx / 2, 27); } const tex = new THREE.CanvasTexture(c); tex.colorSpace = THREE.SRGBColorSpace; labelTex.push(tex); const mat = new THREE.SpriteMaterial({ map: tex, transparent: true, depthTest: false, depthWrite: false }); labelMat.push(mat); const s = new THREE.Sprite(mat); s.position.set(x, y, z); s.scale.set((wpx / 52) * h, h, 1); s.renderOrder = 4; rig.add(s); }; const CYAN = "#7fd8f2"; const AMBER = "#ffbe6a"; [0, 2, 4, 6].forEach((p) => { label(`${p}%`, CYAN, x0 - 0.42, p * YS, z1, 0.24); }); label("DEC 2021", AMBER, xAt(DECEMBERS[0] * 3), -0.34, z0 + 0.34, 0.24); label("DEC 2023", AMBER, xAt(DECEMBERS[2] * 3), -0.34, z0 + 0.34, 0.24); label("DEC 2025", AMBER, xAt(DECEMBERS[4] * 3), -0.34, z0 + 0.34, 0.24); [ [0, "1M"], [5, "2Y"], [9, "10Y"], [11, "30Y"] ].forEach((t) => { // Clear of the block but inside the frame, and the window is narrow. At // 0.42 the tenor labels landed on the December 2025 wall and read as // graffiti on the object; at 0.95 the nearest one, 1M, fell off the // right edge of the slide at the bottom of the swing. label(t[1] , CYAN, x1 + 0.72, 0, zAt((t[0] ) * 8), 0.24); }); /* COMPOSED INTO THE RIGHT HALF OF THE FRAME on purpose. The slide's type owns the left third, so the object is scaled down and pushed right rather than centred and then covered up. */ rig.scale.setScalar(0.82); rig.position.set(2.45, -0.5, 0); scene.add(rig); const key = new THREE.DirectionalLight(0xfff2e2, 2.1); key.position.set(5.2, 6.4, 5.6); const rim = new THREE.DirectionalLight(0xffa028, 1.6); rim.position.set(-5.6, 2.4, -3.8); const fill = new THREE.HemisphereLight(0x7d8794, 0x040405, 0.55); scene.add(key, rim, fill); const resize = () => { const cw = el.clientWidth || 1; const ch = el.clientHeight || 1; renderer.setSize(cw, ch); camera.aspect = cw / ch; camera.updateProjectionMatrix(); }; resize(); const started = performance.now(); let raf = 0; const tick = () => { const t = (performance.now() - started) / 1000; /* A 25 degree swing that never reaches square on, and BOTH ENDS OF THE RANGE WERE RENDERED AND LOOKED AT, because the poster and the PDF and PPTX exports are stills grabbed at an arbitrary frame. - Square on (yaw 0) is a bad frame and was the first setting tried: the maturity axis collapses to almost nothing, the block flattens back into the ribbon this scene started as, and all four tenor labels land on top of the object. So the swing bottoms out at 0.24. - It stays under 0.7 at the other end, past which the four-year time axis foreshortens and December 2025 crowds December 2023. It also never crosses zero, so the December 2025 end always recedes and the December 2021 floor is always the near corner, which is the reading order the copy on this slide assumes. */ rig.rotation.y = 0.46 + Math.sin(t * 0.15) * 0.22; renderer.render(scene, camera); raf = requestAnimationFrame(tick); }; tick(); const ro = new ResizeObserver(resize); ro.observe(el); return () => { cancelAnimationFrame(raf); ro.disconnect(); surfaceGeo.dispose(); skirtGeo.dispose(); edgeGeo.dispose(); wireGeo.dispose(); cageGeo.dispose(); ribGeos.forEach((g) => g.dispose()); [surfaceMat, skirtMat, edgeMat, wireMat, cageMat, ribMat].forEach((m) => m.dispose()); labelMat.forEach((m) => m.dispose()); labelTex.forEach((t) => t.dispose()); envRT.texture.dispose(); skyTex.dispose(); pmrem.dispose(); renderer.dispose(); el.removeChild(renderer.domElement); }; }, []); return _jsxruntime.jsx.call(void 0, 'div', { ref: host, style: { position: "absolute", inset: 0, width: "100%", height: "100%", zIndex: 0 },} ); } /** A figure this note refused to print, and why. */ function Rejected({ n, label, why, last }) { return ( _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "grid", gridTemplateColumns: "38px minmax(0, 0.85fr) minmax(0, 1.3fr)", gap: "clamp(18px, 2.4vw, 36px)", alignItems: "baseline", padding: "clamp(18px, 2.7vh, 28px) 0", borderTop: "1px solid var(--hair-2)", // The panel's own padding leaves the last row floating off a rule that // never closes; a bottom border shuts the block. borderBottom: last ? "1px solid var(--hair-2)" : undefined }, children: [ _jsxruntime.jsx.call(void 0, Meta, { children: n}) , _jsxruntime.jsx.call(void 0, 'span', { style: { fontFamily: MONO, fontWeight: 500, fontSize: "clamp(16px, 1.85vw, 23px)", letterSpacing: "0.01em", color: "var(--fg-faint)", textDecoration: "line-through", textDecorationColor: "var(--primary)", textDecorationThickness: 2 }, children: label }) , _jsxruntime.jsx.call(void 0, 'span', { style: { fontSize: "clamp(14px, 1.55vw, 18px)", lineHeight: 1.45, color: "var(--fg-muted)" }, children: why}) ]}) ); } function App() { return ( _jsxruntime.jsxs.call(void 0, _Deck2.default, { children: [ /* The cold open: data before the deck has said what it is. No title card, no centred anything. The tape sits on the bottom edge, the table takes the width it can get, and the right-hand rail carries the provenance so the figures never have to. */ _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Tape", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column", justifyContent: "center", gap: "clamp(18px, 3vh, 30px)", padding: "clamp(30px, 5vh, 54px) var(--gutter) clamp(22px, 3.5vh, 34px)" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 30 }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { minWidth: 0 }, children: [ _jsxruntime.jsx.call(void 0, Wordmark, { height: 23,} ) , _jsxruntime.jsx.call(void 0, 'p', { className: "kicker", style: { margin: "16px 0 8px" }, children: "United States, every December" }) , _jsxruntime.jsx.call(void 0, 'h1', { className: "headline", style: { margin: 0, maxWidth: "13ch", fontSize: "clamp(34px, 5vw, 62px)" }, children: "Five Decembers, three numbers." }) ]}) , _jsxruntime.jsxs.call(void 0, Meta, { style: { flexShrink: 0, lineHeight: 1.9, textAlign: "right" }, children: ["Research note" , _jsxruntime.jsx.call(void 0, 'br', {} ), "No. 07" ]}) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "grid", gridTemplateColumns: "minmax(0, 1fr) 216px", gap: "clamp(18px, 2.4vw, 34px)", alignItems: "start" }, children: [ _jsxruntime.jsx.call(void 0, _Table2.default, { columns: [ "Year", { label: "CPI, 12 months", align: "right" }, { label: "Unemployment", align: "right" }, // Headers do not wrap, so a long one takes width off its // neighbours: "Fed funds, top of range" made the accent // column twice the width of the others. The precision moved // to the rail on the right. { label: "Fed funds", align: "right" } ], rows: [ [_jsxruntime.jsx.call(void 0, Num, { children: "2021"}, "y21"), _jsxruntime.jsx.call(void 0, Num, { children: "7.0%"}, "c21"), _jsxruntime.jsx.call(void 0, Num, { children: "3.9%"}, "u21"), _jsxruntime.jsx.call(void 0, Num, { lit: true, children: "0.25%"}, "f21")], [_jsxruntime.jsx.call(void 0, Num, { children: "2022"}, "y22"), _jsxruntime.jsx.call(void 0, Num, { children: "6.5%"}, "c22"), _jsxruntime.jsx.call(void 0, Num, { children: "3.5%"}, "u22"), _jsxruntime.jsx.call(void 0, Num, { lit: true, children: "4.50%"}, "f22")], [_jsxruntime.jsx.call(void 0, Num, { children: "2023"}, "y23"), _jsxruntime.jsx.call(void 0, Num, { children: "3.4%"}, "c23"), _jsxruntime.jsx.call(void 0, Num, { children: "3.8%"}, "u23"), _jsxruntime.jsx.call(void 0, Num, { lit: true, children: "5.50%"}, "f23")], [_jsxruntime.jsx.call(void 0, Num, { children: "2024"}, "y24"), _jsxruntime.jsx.call(void 0, Num, { children: "2.9%"}, "c24"), _jsxruntime.jsx.call(void 0, Num, { children: "4.1%"}, "u24"), _jsxruntime.jsx.call(void 0, Num, { lit: true, children: "4.50%"}, "f24")], [_jsxruntime.jsx.call(void 0, Num, { children: "2025"}, "y25"), _jsxruntime.jsx.call(void 0, Num, { children: "2.7%"}, "c25"), _jsxruntime.jsx.call(void 0, Num, { children: "4.4%"}, "u25"), _jsxruntime.jsx.call(void 0, Num, { lit: true, children: "3.75%"}, "f25")] ], highlightCol: 3,} ) , _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [ _jsxruntime.jsx.call(void 0, 'div', { style: { borderTop: "1px solid var(--hair)", paddingTop: 12 }, children: _jsxruntime.jsx.call(void 0, Meta, { tone: "cyan", children: "Sources"}) }) , _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", flexDirection: "column", gap: 9, fontFamily: MONO, fontSize: 11.5, lineHeight: 1.5, color: "var(--fg-muted)" }, children: [ _jsxruntime.jsx.call(void 0, 'span', { children: "CPI-U, all items, NSA. BLS" }) , _jsxruntime.jsx.call(void 0, 'span', { children: "Unemployment rate, SA. BLS" }) , _jsxruntime.jsx.call(void 0, 'span', { children: "Target range, top, at year end. Federal Reserve" }) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { style: { borderTop: "1px solid var(--hair-2)", paddingTop: 12, display: "flex", flexDirection: "column", gap: 6 }, children: [ _jsxruntime.jsx.call(void 0, Meta, { children: "Read"}) , _jsxruntime.jsx.call(void 0, 'span', { style: { fontFamily: MONO, fontSize: 11.5, color: "var(--fg-muted)" }, children: "2026-08-07"}) ]}) ]}) ]}) ]}) , _jsxruntime.jsx.call(void 0, Tape, {} ) ]}) }) /* THE OBJECT, and it replaced the contents page, which was the airiest slide in the note and the one thing here a printed page does better. This is the thing a printed page cannot do at all: 588 published figures standing up as one lit solid, turning, with the cover table's five Decembers running across it as ribs. Full bleed, canvas under everything, type parked bottom left behind its own corner scrim so the mesh keeps the top right of the frame to itself. */ , _jsxruntime.jsxs.call(void 0, _Slide2.default, { nav: "Surface", full: true, children: [ _jsxruntime.jsx.call(void 0, YieldSurface, {} ) , _jsxruntime.jsx.call(void 0, 'span', { style: { position: "absolute", inset: 0, width: "100%", height: "100%", zIndex: 1, pointerEvents: "none", background: "linear-gradient(104deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.62) 30%, rgba(0,0,0,0.12) 56%, rgba(0,0,0,0) 78%), linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 46%, rgba(0,0,0,0.66) 82%, rgba(0,0,0,0.94) 100%)" },} ) , _jsxruntime.jsxs.call(void 0, 'div', { style: { position: "relative", zIndex: 2, flex: "1 1 auto", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: "clamp(26px, 4.4vh, 44px) var(--gutter) clamp(30px, 5.2vh, 52px)" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 24, paddingBottom: 12, borderBottom: "1px solid var(--hair)" }, children: [ _jsxruntime.jsx.call(void 0, Meta, { tone: "cyan", children: "US Treasury par yield curve" }) , _jsxruntime.jsx.call(void 0, Meta, { children: "49 month ends, 12 tenors" }) ]}) /* The axis key. It fills what was a dead top left quadrant, and it is the thing that makes the object readable without a caption: three axes, named, in the deck's own chrome voice. */ , _jsxruntime.jsx.call(void 0, 'div', { style: { marginTop: "clamp(18px, 3vh, 30px)", maxWidth: 330 }, children: [ ["X", "Time, Dec 2021 to Dec 2025"], ["Z", "Maturity, 1M to 30Y"], ["Y", "Par yield, per cent"] ].map((row) => ( _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", gap: 16, alignItems: "baseline", padding: "8px 0", borderBottom: "1px solid var(--hair-2)" }, children: [ _jsxruntime.jsx.call(void 0, Meta, { tone: "cyan", style: { width: 12 }, children: row[0] }) , _jsxruntime.jsx.call(void 0, Meta, { style: { letterSpacing: "0.1em" }, children: row[1]}) ]}, row[0]) )) }) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { style: { maxWidth: "min(100%, 430px)" }, children: [ _jsxruntime.jsx.call(void 0, 'p', { className: "kicker", style: { margin: 0 }, children: "The whole curve, four years deep" }) , _jsxruntime.jsx.call(void 0, 'h2', { className: "headline", style: { margin: "10px 0 0", maxWidth: "14ch", fontSize: "clamp(28px, 3.4vw, 44px)" }, children: "Every figure in this object was published." }) , _jsxruntime.jsx.call(void 0, 'p', { className: "lead", style: { margin: "clamp(14px, 2.2vh, 20px) 0 0", maxWidth: "34ch", fontSize: "clamp(15px, 1.6vw, 19px)" }, children: "Height is the par yield. The front edge is the one month bill: at the floor, then above five and a half per cent, then falling again." }) , _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", gap: "clamp(18px, 2.6vw, 34px)", marginTop: "clamp(16px, 2.4vh, 22px)", paddingTop: "clamp(12px, 2vh, 18px)", borderTop: "1px solid var(--hair)" }, children: [ _jsxruntime.jsx.call(void 0, Fig, { v: "0.06%", k: "1M, Dec 2021" , size: "clamp(20px, 2.1vw, 29px)" ,} ) , _jsxruntime.jsx.call(void 0, Fig, { v: "5.60%", k: "1M, Dec 2023" , size: "clamp(20px, 2.1vw, 29px)" ,} ) , _jsxruntime.jsx.call(void 0, Fig, { v: "3.74%", k: "1M, Dec 2025" , size: "clamp(20px, 2.1vw, 29px)" ,} ) ]}) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { margin: "clamp(12px, 2vh, 18px) 0 0", maxWidth: "46ch", fontSize: "clamp(11.5px, 1vw, 13px)" }, children: "Daily Treasury Par Yield Curve Rates, U.S. Department of the Treasury: the last trading day of every month, December 2021 to December 2025. Drawn smooth across maturity and monotone between month ends, so no point on the surface sits above or below the figures Treasury printed either side of it. The five lit ribs are the five Decembers on the previous slide." }) ]}) ]}) ]}) /* The deck's one graph, and the only series here with real range: a 9.2 million fall and a 7.3 million recovery is worth drawing, where a flat series would have belonged in a single figure. */ , _jsxruntime.jsx.call(void 0, _Split2.default, { nav: "Payrolls", kicker: "US nonfarm payrolls" , title: "Seven Decembers, one line." , body: _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [ _jsxruntime.jsx.call(void 0, 'p', { style: { margin: 0 }, children: "One series, seven year ends: a collapse, a recovery of almost the same size, then four years of steadily smaller gains." }) , _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", gap: "clamp(22px, 3.4vw, 52px)", marginTop: "clamp(20px, 3.2vh, 30px)", paddingTop: "clamp(16px, 2.4vh, 22px)", borderTop: "1px solid var(--hair)" }, children: [ _jsxruntime.jsx.call(void 0, Fig, { v: "-9.2M", k: "2020", size: "clamp(22px, 2.4vw, 32px)" ,} ) , _jsxruntime.jsx.call(void 0, Fig, { v: "+7.3M", k: "2021", size: "clamp(22px, 2.4vw, 32px)" ,} ) , _jsxruntime.jsx.call(void 0, Fig, { v: "+116K", k: "2025", size: "clamp(22px, 2.4vw, 32px)" ,} ) ]}) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { marginTop: "clamp(18px, 2.8vh, 26px)" }, children: "Total nonfarm employment, seasonally adjusted, December to December. U.S. Bureau of Labor Statistics, Current Employment Statistics." }) ]}) , media: _jsxruntime.jsx.call(void 0, 'div', { style: { width: "100%", padding: "clamp(26px, 3.6vw, 54px)" }, children: _jsxruntime.jsxs.call(void 0, Panel, { label: "Payrolls", tag: "CES0000000001", children: [ /* The left inset is where the zero label lives: dropped on the chart itself it landed on top of the 2019 point. */ _jsxruntime.jsxs.call(void 0, 'div', { style: { position: "relative", paddingLeft: 26 }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { position: "relative" }, children: [ _jsxruntime.jsx.call(void 0, _Charts.LineChart, { points: PAYROLLS, height: CHART_H,} ) /* Zero rule: without it the flat 2025 tail sits mid-box and reads as a high number rather than as nearly nothing. */ , _jsxruntime.jsx.call(void 0, 'div', { style: { position: "absolute", left: 0, right: 0, top: ZERO_TOP, borderTop: "1px dashed color-mix(in srgb, var(--cyan) 70%, transparent)", pointerEvents: "none" },} ) ]}) , _jsxruntime.jsx.call(void 0, 'span', { style: { position: "absolute", left: 0, top: ZERO_TOP - 8, fontFamily: MONO, fontSize: 12, color: "var(--cyan)" }, children: "0" }) ]}) /* Same 26px inset as the plot, so the year ticks stay under their own points. LineChart has no labels prop. */ , _jsxruntime.jsx.call(void 0, 'div', { style: { display: "flex", justifyContent: "space-between", borderTop: "1px solid var(--hair-2)", paddingTop: 10, marginLeft: 26 }, children: PAYROLL_YEARS.map((y) => ( _jsxruntime.jsx.call(void 0, Meta, { style: { letterSpacing: "0.08em" }, children: y }, y) )) }) , _jsxruntime.jsx.call(void 0, Meta, { style: { letterSpacing: "0.14em" }, children: "Change in jobs, millions" }) ]}) }) ,} ) /* The homage. No Terminal screenshot: four panels of type instead, and all four headings and their sentences are Bloomberg's own words for what the Terminal holds. */ , _jsxruntime.jsxs.call(void 0, _Slide2.default, { nav: "Terminal", children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 30, marginBottom: "clamp(20px, 3.4vh, 34px)" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { minWidth: 0 }, children: [ _jsxruntime.jsx.call(void 0, 'p', { className: "kicker", style: { margin: 0 }, children: "The Bloomberg Terminal" }) , _jsxruntime.jsx.call(void 0, 'h2', { className: "headline", style: { margin: "10px 0 0", maxWidth: "18ch", fontSize: "clamp(30px, 4.3vw, 54px)" }, children: "One screen, four kinds of answer." }) ]}) , _jsxruntime.jsxs.call(void 0, Meta, { style: { flexShrink: 0, textAlign: "right", lineHeight: 1.9 }, children: ["professional" , _jsxruntime.jsx.call(void 0, 'br', {} ), ".bloomberg.com" ]}) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gridAutoRows: "minmax(clamp(160px, 30vh, 225px), auto)", gap: 14 }, children: [ _jsxruntime.jsxs.call(void 0, Panel, { label: "Data", tag: "01", bodyStyle: PANEL_BODY, children: [ _jsxruntime.jsx.call(void 0, 'h3', { style: { margin: 0, fontFamily: "var(--font-head)", fontSize: "clamp(24px, 2.6vw, 34px)", fontWeight: 600 }, children: "Every asset class" }) , _jsxruntime.jsx.call(void 0, 'p', { style: { margin: 0, fontSize: "clamp(14px, 1.5vw, 17px)", lineHeight: 1.5, color: "var(--fg-muted)" }, children: "Coverage of markets, industries, companies and securities, priced and cross-referenced in one place." }) ]}) , _jsxruntime.jsxs.call(void 0, Panel, { label: "News", tag: "02", bodyStyle: PANEL_BODY, children: [ _jsxruntime.jsx.call(void 0, 'h3', { style: { margin: 0, fontFamily: "var(--font-head)", fontSize: "clamp(24px, 2.6vw, 34px)", fontWeight: 600 }, children: "If it affects markets" }) , _jsxruntime.jsx.call(void 0, 'p', { style: { margin: 0, fontSize: "clamp(14px, 1.5vw, 17px)", lineHeight: 1.5, color: "var(--fg-muted)" }, children: "Bloomberg's own promise for its newsroom: if it affects markets, Bloomberg News will be there." }) ]}) , _jsxruntime.jsxs.call(void 0, Panel, { label: "Research", tag: "03", bodyStyle: PANEL_BODY, children: [ _jsxruntime.jsx.call(void 0, 'h3', { style: { margin: 0, fontFamily: "var(--font-head)", fontSize: "clamp(24px, 2.6vw, 34px)", fontWeight: 600 }, children: "350 analysts on staff" }) , _jsxruntime.jsx.call(void 0, 'p', { style: { margin: 0, fontSize: "clamp(14px, 1.5vw, 17px)", lineHeight: 1.5, color: "var(--fg-muted)" }, children: "Bloomberg Intelligence puts more than 350 research professionals inside the same window as the data." }) ]}) , _jsxruntime.jsxs.call(void 0, Panel, { label: "Community", tag: "04", bodyStyle: PANEL_BODY, children: [ _jsxruntime.jsx.call(void 0, 'h3', { style: { margin: 0, fontFamily: "var(--font-head)", fontSize: "clamp(24px, 2.6vw, 34px)", fontWeight: 600 }, children: "350,000 on the other end" }) , _jsxruntime.jsx.call(void 0, 'p', { style: { margin: 0, fontSize: "clamp(14px, 1.5vw, 17px)", lineHeight: 1.5, color: "var(--fg-muted)" }, children: "The network Bloomberg says the Terminal opens onto: more than 350,000 decision makers, reachable from it." }) ]}) ]}) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { marginTop: 16 }, children: "All four headings and their figures are Bloomberg's own, from professional.bloomberg.com, read 7 August 2026." }) ]}) /* The picture, full frame and undivided. The engine's shared .cover-scrim is a deliberately heavy wash of --bg, which on a true black ground erases a photograph, so this slide carries its own directional scrim: nearly clear across the lit ring and the monitor wall, opaque only across the dark studio floor where the type actually sits. */ , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Newsroom", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { position: "relative", height: "100%", width: "100%", overflow: "hidden" }, children: [ _jsxruntime.jsx.call(void 0, 'img', { src: "/gallery/bloomberg/newsroom.webp", alt: "Bloomberg Television's studio at Bloomberg London: broadcast cameras and an overhead lighting rig around a lit circular anchor desk, monitor wall behind" , style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" },} ) , _jsxruntime.jsx.call(void 0, 'span', { style: { position: "absolute", inset: 0, width: "100%", height: "100%", background: "linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.2) 26%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0.94) 80%, rgba(0,0,0,0.98) 100%)" },} ) /* A second, directional wash. The headline crosses the studio's lit backdrop panel on the left, where white type on the vertical gradient alone was only just holding. This darkens the left third and leaves the cameras and the anchor ring untouched. */ , _jsxruntime.jsx.call(void 0, 'span', { style: { position: "absolute", inset: 0, width: "100%", height: "100%", background: "linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.24) 34%, rgba(0,0,0,0) 62%)" },} ) , _jsxruntime.jsxs.call(void 0, 'div', { style: { position: "absolute", left: 0, right: 0, top: 0, padding: "clamp(26px, 4.5vh, 44px) var(--gutter) 0", display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 20 }, children: [ _jsxruntime.jsx.call(void 0, Meta, { tone: "cyan", children: "Bloomberg Television, London" }) , _jsxruntime.jsx.call(void 0, Meta, { children: "Studio floor" }) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { style: { position: "absolute", left: 0, right: 0, bottom: 0, padding: "0 var(--gutter) clamp(30px, 5.5vh, 54px)", display: "flex", flexDirection: "column", gap: "clamp(16px, 2.6vh, 26px)" }, children: [ _jsxruntime.jsx.call(void 0, 'h2', { className: "headline", style: { margin: 0, maxWidth: "17ch", fontSize: "clamp(30px, 4.4vw, 56px)" }, children: "Behind one line of tape, a building." }) , _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", gap: "clamp(26px, 5vw, 74px)", borderTop: "1px solid var(--hair)", paddingTop: "clamp(14px, 2.4vh, 22px)" }, children: [ _jsxruntime.jsx.call(void 0, Fig, { v: "2,700", k: "News professionals and analysts" ,} ) , _jsxruntime.jsx.call(void 0, Fig, { v: "120+", k: "Global news bureaus" ,} ) , _jsxruntime.jsx.call(void 0, Fig, { v: "70+", k: "Countries",} ) ]}) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { margin: 0 }, children: "Figures from Bloomberg Professional Services, read 7 August 2026. Photo: Bloomberg London studio by The wub, CC BY-SA 4.0, via Wikimedia Commons." }) ]}) ]}) }) , _jsxruntime.jsxs.call(void 0, _Slide2.default, { nav: "Method", children: [ _jsxruntime.jsx.call(void 0, 'p', { className: "kicker", style: { margin: 0 }, children: "Method" }) , _jsxruntime.jsx.call(void 0, 'h2', { className: "headline", style: { margin: "10px 0 clamp(22px, 3.6vh, 36px)", fontSize: "clamp(30px, 4.3vw, 54px)" }, children: "How a number gets on the page." }) /* is interactive: in the poster still and in PDF/PPTX export only the defaultOpen body renders, so item 0's body has to stand on its own and the other three carry nothing load-bearing. Their titles say the whole point; the bodies only elaborate. */ , _jsxruntime.jsx.call(void 0, _Accordion2.default, { defaultOpen: 0, items: [ { title: "Start at the office that produces the number", body: "Every series in this note was pulled from the agency that publishes it: the Bureau of Labor Statistics for prices and payrolls, the Federal Reserve for the target range. Not from a story that quoted them, and not from memory." }, { title: "Print the current vintage, not the first print", body: "December 2023 unemployment is 3.8 per cent. It was first published as 3.7 and the old figure is still repeated." }, { title: "Use figures that have stopped moving", body: "Calendar-year totals and year-end levels only. Nothing that changes between writing the slide and showing it." }, { title: "Cut what cannot be traced", body: "Softening an unsourced number does not make it true. It goes on the next slide instead." } ],} ) ]}) , _jsxruntime.jsxs.call(void 0, _Slide2.default, { nav: "Omitted", children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 30, marginBottom: "clamp(18px, 3vh, 30px)" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { minWidth: 0 }, children: [ _jsxruntime.jsx.call(void 0, 'p', { className: "kicker", style: { margin: 0 }, children: "Not in this note" }) , _jsxruntime.jsx.call(void 0, 'h2', { className: "headline", style: { margin: "10px 0 0", maxWidth: "19ch", fontSize: "clamp(30px, 4.3vw, 54px)" }, children: "Three numbers we would not print." }) ]}) , _jsxruntime.jsxs.call(void 0, Meta, { style: { flexShrink: 0, textAlign: "right", lineHeight: 1.9 }, children: ["No primary" , _jsxruntime.jsx.call(void 0, 'br', {} ), "source" ]}) ]}) , _jsxruntime.jsx.call(void 0, Panel, { label: "Rejected", tag: "03 of 03" , children: _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", flexDirection: "column" }, children: [ _jsxruntime.jsx.call(void 0, Rejected, { n: "01", label: "Bloomberg L.P. revenue" , why: "Bloomberg is privately held and publishes no accounts. Every revenue figure in circulation is somebody else's estimate." ,} ) , _jsxruntime.jsx.call(void 0, Rejected, { n: "02", label: "Terminal subscriber counts" , why: "Counts and subscription prices are quoted constantly, and always sourced to outside research firms rather than to Bloomberg. An estimate is not a fact with a decimal point." ,} ) , _jsxruntime.jsx.call(void 0, Rejected, { n: "03", label: "Billionaires Index rankings" , why: "Bloomberg recomputes them at the close of every trading day in New York. A slide carrying one is wrong by tomorrow." , last: true,} ) ]}) }) ]}) /* Not a second cold open and not a repeat of the cover: one line, centred, on an empty ground, and it is our own editorial position rather than anything Bloomberg says. */ , _jsxruntime.jsxs.call(void 0, _Slide2.default, { nav: "Close", center: true, children: [ _jsxruntime.jsx.call(void 0, Wordmark, { height: 24, align: "center",} ) /* .rule sets width/height with no display, so it has to be a block element: as a it stays inline and paints nothing. */ /* marginInline must stay auto: the centring net in engine.css is a zero-specificity :where() rule, so a `margin` shorthand here would silently pin the rule to the left gutter. */ , _jsxruntime.jsx.call(void 0, 'div', { className: "rule", style: { marginTop: 34, marginBottom: 30, marginInline: "auto" },} ) /* The same trap the rule above documents, and it caught this line too: `margin: 0` is a shorthand, so it beats the zero-specificity :where() net and a maxWidth block hugs the left gutter even on a centred slide. Zero the block axis only and leave the inline axis auto. */ , _jsxruntime.jsx.call(void 0, 'h2', { className: "display", style: { marginBlock: 0, marginInline: "auto", maxWidth: "16ch", fontSize: "clamp(40px, 6.4vw, 88px)" }, children: "Print the source, or cut the number." }) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { marginTop: 34, fontFamily: MONO, letterSpacing: "0.14em" }, children: "bloomberg.com" }) ]}) ]}) ); } exports.default = App;

Bloomberg: Five Decembers, three numbers