"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 _three = require('three'); var THREE = _interopRequireWildcard(_three); var _Split = require('./components/Split'); var _Split2 = _interopRequireDefault(_Split); var _Deck = require('./engine/Deck'); var _Deck2 = _interopRequireDefault(_Deck); var _Slide = require('./engine/Slide'); var _Slide2 = _interopRequireDefault(_Slide); /* Anthropic - "the essay". The set's typographic case: zero images, a serif display face, and left-aligned full-bleed statements instead of centred cover slides. It deliberately does not use or

at all, so it cannot be mistaken for the other decks' skeleton (see VARIETY.md). Every claim is published by Anthropic itself. No invented metrics. Layout note (revision pass). The mission, the method and the chronology were originally and plus a short column strip: each rendered a band of content floating in the vertical middle of an empty stage, which is the defect this deck was pulled back for. They are now hand-rolled spreads that run to the gutters. The devices survive (a pull quote, a numbered process, a dated rail); only the framing changed. and are still demonstrated elsewhere in the gallery, by five decks between them, so nothing is lost from the set. remains unused everywhere: it overflows the stage and SlideFit then shrinks the whole slide. SECOND REVISION, 7 August 2026. Two things changed. 1. THE 3D IS NOW AN OBJECT. It was two nested wireframe icosahedra with a small clay dot inside them, which at contact-sheet size photographed as a faint grey scribble on ivory: no form, no light, nothing to recognise. It is now Anthropic's own mark, extruded and bevelled out of its published outline and lit like a piece cast in glazed clay, standing over its own contact shadow. See ClayMark below for the mechanics and the traps. 2. TWO SLIDES WERE ADDED, taking the deck from six to eight, which is where the rest of the gallery sits. Both are essay slides, both are Anthropic's own published words, and both are cited on the slide: - "Microscope", on interpretability, from "Tracing the thoughts of a large language model", anthropic.com/news/tracing-thoughts-language-model, 27 March 2025. Including the caveat, which is the reason the slide is in the deck: "Even on short, simple prompts, our method only captures a fraction of the total computation performed by Claude." - "Safeguards", on the Responsible Scaling Policy (anthropic.com/news/anthropics-responsible-scaling-policy, 19 September 2023) and the activation of ASL-3 protections for Claude Opus 4 (anthropic.com/news/activating-asl3-protections, 22 May 2025). The RSP page is the source for the AI Safety Levels being "modeled loosely after the US government's biosafety level (BSL) standards" and for the commitment to "temporarily pause training of more powerful models if our AI scaling outstrips our ability to comply with the necessary safety procedures". The ASL-3 page is the source for the date, for "a precautionary and provisional action", for "more than 100 different security controls", and for Constitutional Classifiers monitoring "model inputs and outputs". CONSIDERED AND LEFT OUT. Anthropic's revenue run-rate, its valuation, its headcount and any customer count: all of those move monthly and none of them is what this deck is about. The Model Context Protocol (open-sourced 25 November 2024) is real and would have made a good ninth slide, but nine slides of ivory prose is a slog and the safety pair is the stronger half of the argument. STILL ZERO IMAGE FILES. Nothing in public/gallery/anthropic/ is referenced except logo.svg, which is the wordmark. The sunburst on the closing slide is drawn from the same published outline the 3D object is extruded from, so it is geometry in this module rather than an asset on disk. */ /** * THE PUBLISHED OUTLINE OF THE CLAUDE MARK, verbatim. * * This is the `d` attribute of https://commons.wikimedia.org/wiki/File:Claude_AI_symbol.svg * (a 0-100 square viewBox, y down), copied byte for byte and not redrawn. It is * used twice: extruded into the 3D object on the "Shape" slide, and painted * flat as the sign-off on the closing slide. Commons records the file as * ineligible for copyright protection; the mark is Anthropic's trademark and * is used here nominatively, on the same basis as every other brand mark in * this gallery. This deck is not affiliated with or endorsed by Anthropic. */ const MARK_PATH = "m19.6 66.5 19.7-11 .3-1-.3-.5h-1l-3.3-.2-11.2-.3L14 53l-9.5-.5-2.4-.5L0 49l.2-1.5 2-1.3 2.9.2 6.3.5 9.5.6 6.9.4L38 49.1h1.6l.2-.7-.5-.4-.4-.4L29 41l-10.6-7-5.6-4.1-3-2-1.5-2-.6-4.2 2.7-3 3.7.3.9.2 3.7 2.9 8 6.1L37 36l1.5 1.2.6-.4.1-.3-.7-1.1L33 25l-6-10.4-2.7-4.3-.7-2.6c-.3-1-.4-2-.4-3l3-4.2L28 0l4.2.6L33.8 2l2.6 6 4.1 9.3L47 29.9l2 3.8 1 3.4.3 1h.7v-.5l.5-7.2 1-8.7 1-11.2.3-3.2 1.6-3.8 3-2L61 2.6l2 2.9-.3 1.8-1.1 7.7L59 27.1l-1.5 8.2h.9l1-1.1 4.1-5.4 6.9-8.6 3-3.5L77 13l2.3-1.8h4.3l3.1 4.7-1.4 4.9-4.4 5.6-3.7 4.7-5.3 7.1-3.2 5.7.3.4h.7l12-2.6 6.4-1.1 7.6-1.3 3.5 1.6.4 1.6-1.4 3.4-8.2 2-9.6 2-14.3 3.3-.2.1.2.3 6.4.6 2.8.2h6.8l12.6 1 3.3 2 1.9 2.7-.3 2-5.1 2.6-6.8-1.6-16-3.8-5.4-1.3h-.8v.4l4.6 4.5 8.3 7.5L89 80.1l.5 2.4-1.3 2-1.4-.2-9.2-7-3.6-3-8-6.8h-.5v.7l1.8 2.7 9.8 14.7.5 4.5-.7 1.4-2.6 1-2.7-.6-5.8-8-6-9-4.7-8.2-.5.4-2.9 30.2-1.3 1.5-3 1.2-2.5-2-1.4-3 1.4-6.2 1.6-8 1.3-6.4 1.2-7.9.7-2.6v-.2H49L43 72l-9 12.3-7.2 7.6-1.7.7-3-1.5.3-2.8L24 86l10-12.8 6-7.9 4-4.6-.1-.5h-.3L17.2 77.4l-4.7.6-2-2 .2-3 1-1 8-5.5Z"; /** Fills the stage. Every hand-rolled spread below hangs off this. */ const SPREAD = { flex: "1 1 auto", minHeight: 0, boxSizing: "border-box", display: "flex", flexDirection: "column" }; /** Full-bleed statement: type set against the left gutter, nothing centred. */ function Statement({ kicker, mark, children, foot } ) { return ( _jsxruntime.jsxs.call(void 0, 'div', { style: { height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", padding: "var(--gutter-y) var(--gutter)", gap: 22 }, children: [ mark ? _jsxruntime.jsx.call(void 0, Wordmark, { height: 22,} ) : null , kicker ? _jsxruntime.jsx.call(void 0, 'div', { className: "kicker", children: kicker}) : null , _jsxruntime.jsx.call(void 0, 'h1', { className: "display", style: { maxWidth: "16ch", margin: 0 }, children: children }) , foot ? ( _jsxruntime.jsx.call(void 0, 'div', { className: "foot", style: { marginTop: 8 }, children: foot }) ) : null ]}) ); } /** * The brand's real wordmark, from public/gallery/anthropic/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 the dark * grounds. One treatment, ten brands, no per-file special cases. */ function Wordmark({ height = 26, invert = false }) { return ( _jsxruntime.jsx.call(void 0, 'img', { src: "/gallery/anthropic/logo.svg", alt: "Anthropic logo" , width: Math.round(height * 8.91), height: height, style: { display: "block", height, // Explicit width + alignSelf: inside a column flex the default // align-items:stretch was widening the replaced element and floating // it to the middle of the slide instead of the left gutter. alignSelf: "flex-start", opacity: 0.85, filter: invert ? "brightness(0) invert(1)" : "brightness(0)" },} ) ); } /** Resolves a theme token to a THREE.Color so the scene re-themes with the deck. */ function tokenColor(name, fallback) { const probe = document.createElement("div"); probe.style.cssText = `position:absolute;visibility:hidden;color:var(${name}, ${fallback})`; document.body.appendChild(probe); const value = getComputedStyle(probe).color; probe.remove(); return new THREE.Color(value || fallback); } /** Frees every geometry and material a scene allocated. */ function disposeScene(scene) { scene.traverse((obj) => { const mesh = obj ; if (mesh.geometry) { mesh.geometry.dispose(); } const mat = mesh.material ; if (Array.isArray(mat)) { mat.forEach((m) => m.dispose()); } else if (mat) { mat.dispose(); } }); } /** * Turns MARK_PATH into a THREE.Shape. * * A twelve-line SVG path reader rather than a hand-transcribed point list, so * the outline in this file stays the published one and can be diffed against * Commons. The path uses only m, l, h, H, L, v, c and Z, which is all this * handles: anything else is skipped rather than guessed at. Cubics are * flattened to eight segments, which is finer than the 0.2-unit detail already * in the path. * * TWO THINGS THAT MATTER FOR THE EXTRUSION. * * The path closes with a point 0.1 units from where it started. Left in, that * near-duplicate vertex is a segment far shorter than the bevel, and a bevel * wider than the segment it is offsetting folds through itself and throws a * spike. It is dropped. * * SVG y runs down and three's y runs up, so the outline is flipped as it is * read. Forgetting this does not error, it silently builds the mark upside * down, which on a twelve-armed near-radial glyph is almost impossible to spot * by eye and very easy to ship. */ function markShape(scale) { const toks = MARK_PATH.match(/([MmLlHhVvCcZz])|(-?\d*\.?\d+)/g) || []; const pts = []; let i = 0; let cmd = ""; let x = 0; let y = 0; const n = () => parseFloat(toks[i++]); const cubic = (x1, y1, x2, y2, x3, y3) => { const x0 = x; const y0 = y; for (let k = 1; k <= 8; k += 1) { const t = k / 8; const u = 1 - t; pts.push([ u * u * u * x0 + 3 * u * u * t * x1 + 3 * u * t * t * x2 + t * t * t * x3, u * u * u * y0 + 3 * u * u * t * y1 + 3 * u * t * t * y2 + t * t * t * y3 ]); } x = x3; y = y3; }; while (i < toks.length) { const tok = toks[i]; if (/[A-Za-z]/.test(tok)) { cmd = tok; i += 1; if (cmd === "z" || cmd === "Z") { cmd = ""; continue; } } else if (cmd === "m") { // A moveto followed by more numbers is an implicit lineto. cmd = "l"; } else if (cmd === "M") { cmd = "L"; } if (!cmd) { i += 1; continue; } if (cmd === "m" || cmd === "l") { x += n(); y += n(); pts.push([x, y]); } else if (cmd === "M" || cmd === "L") { x = n(); y = n(); pts.push([x, y]); } else if (cmd === "h") { x += n(); pts.push([x, y]); } else if (cmd === "H") { x = n(); pts.push([x, y]); } else if (cmd === "v") { y += n(); pts.push([x, y]); } else if (cmd === "V") { y = n(); pts.push([x, y]); } else if (cmd === "c") { cubic(x + n(), y + n(), x + n(), y + n(), x + n(), y + n()); } else if (cmd === "C") { cubic(n(), n(), n(), n(), n(), n()); } else { i += 1; } } while ( pts.length > 3 && Math.hypot(pts[0][0] - pts[pts.length - 1][0], pts[0][1] - pts[pts.length - 1][1]) < 0.4 ) { pts.pop(); } const shape = new THREE.Shape(); pts.forEach(([px, py], k) => { const wx = (px - 50) * scale; const wy = (50 - py) * scale; if (k === 0) { shape.moveTo(wx, wy); } else { shape.lineTo(wx, wy); } }); shape.closePath(); return shape; } /** * THE 3D ELEMENT: Anthropic's own mark, cast as a solid. * * WHAT IT REPLACED, and why. This slot used to hold two nested wireframe * icosahedra with a small clay dot in the middle of them. On a 1280x720 stage * that is a hairline grey polygon on ivory: it has no surface, so it cannot * catch light, so it has no form, and on the gallery contact sheet you cannot * tell the slide contains anything at all. HERO-3D.md calls that class of * scene a diagram pretending to be an object, and it was the weakest one in * the set. * * WHAT IT IS NOW. The published outline of the Claude sunburst, extruded 0.44 * units deep with a 0.042 bevel on both faces, standing a little over an * invisible floor that catches its shadow, swinging through about forty * degrees. Twelve bevelled arms is twelve chamfered edges for the key light to * run along, which is the whole reason a brand mark is worth extruding: the * bevel, not the face, is what makes it read as a solid. * * THE BEVEL IS AS BIG AS THE OUTLINE WILL TAKE. ExtrudeGeometry offsets the * contour along each vertex's miter and applies no miter limit, so a sharp * point plus a wide bevel equals a needle sticking out of the object. This * outline is unusually forgiving: its arms have blunt, faceted tips and its * sharpest interior angle is about 80 degrees, a miter factor of 1.6, so 0.042 * against a 3.6-unit mark is safe. A mark drawn with true points would need * roughly a third of that. * * TWO MATERIALS, NOT ONE. ExtrudeGeometry emits two groups: the front and back * faces are material 0 and the walls plus both bevels are material 1. The * walls take a clay darkened to 72 percent, so the object's own thickness * separates from its face instead of dissolving into it. That single change * did more for legibility than any light in the scene. * * ON IVORY, A CONTACT SHADOW IS NOT OPTIONAL. A #d97757 object on an #f0eee6 * ground is a large hue step and a small tonal one, so with nothing under it * the mark floats and reads flat. The floor is a plane carrying a * THREE.ShadowMaterial: transparent everywhere the key light reaches, so no * grey rectangle appears over the deck's own background, and dark only where * the mark occludes it. The shadow is what puts the object in a room. * * THE STUDIO IS GENERATED, because the sandbox has no network and there is no * HDRI to fetch. A 32x256 canvas is painted with a bright ceiling, one * darker horizon band and a warm ivory floor, wrapped as an equirectangular * CanvasTexture and pushed through PMREMGenerator (core three, not examples/). * The horizon band is the load-bearing stop: without something dark in the * environment the clearcoat reflects a uniform white and the glaze reads as * matte paint. * * IT SWINGS, IT DOES NOT SPIN. The poster and both exports are stills captured * at an arbitrary frame. An oscillation of about plus or minus twenty degrees * keeps the face toward the camera and the lit bevels facing the key light in * every single frame; a continuous rotation would edge-on the mark for part of * every cycle and roughly a third of all posters would catch it there. */ function ClayMark() { const host = _react.useRef(null); _react.useEffect.call(void 0, () => { const el = host.current; if (!el) { return; } const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(30, 1, 0.1, 100); camera.position.set(0, 1.0, 9.4); // Aimed ABOVE the object, not at it. The camera has to sit high enough to // see floor behind the mark or there is nowhere for the shadow to land, // and aiming level at that height parks the object in the top half of the // column with dead ivory under it. camera.lookAt(0, 0.22, 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.12; renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.domElement.style.display = "block"; el.appendChild(renderer.domElement); // The generated studio: bright ceiling, one dark horizon band, ivory floor. const sky = document.createElement("canvas"); sky.width = 32; sky.height = 256; const ctx = sky.getContext("2d"); if (ctx) { const grad = ctx.createLinearGradient(0, 0, 0, 256); grad.addColorStop(0, "#ffffff"); grad.addColorStop(0.16, "#ffffff"); grad.addColorStop(0.24, "#fbf3e7"); grad.addColorStop(0.4, "#bab1a0"); grad.addColorStop(0.5, "#4e483d"); grad.addColorStop(0.6, "#bab1a0"); grad.addColorStop(0.74, "#efece3"); grad.addColorStop(1, "#fdfbf6"); ctx.fillStyle = grad; ctx.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; // A GLAZE, NOT A GRADIENT. An extruded face is dead flat, so every point of // it reflects the same patch of environment and returns exactly one colour: // that is the difference between a solid and a sticker, and no amount of // extra lighting fixes it. This is a procedural roughness map, low // frequency swell plus a little grain, so the specular breaks up across the // face the way it does on something fired and glazed. It drives the // clearcoat too, which is where it actually shows: the long highlight down // each arm now varies along its length instead of running like a strip of // tape. const glaze = document.createElement("canvas"); glaze.width = 256; glaze.height = 256; const gctx = glaze.getContext("2d"); if (gctx) { const img = gctx.createImageData(256, 256); for (let p = 0; p < 256 * 256; p += 1) { const gx = p % 256; const gy = (p / 256) | 0; const v = 132 + Math.sin(gx * 0.049) * Math.cos(gy * 0.037) * 26 + Math.sin((gx + gy) * 0.019) * 18 + (Math.random() - 0.5) * 22; const c = Math.max(0, Math.min(255, v)); img.data[p * 4] = c; img.data[p * 4 + 1] = c; img.data[p * 4 + 2] = c; img.data[p * 4 + 3] = 255; } gctx.putImageData(img, 0, 0); } const glazeTex = new THREE.CanvasTexture(glaze); glazeTex.wrapS = THREE.RepeatWrapping; glazeTex.wrapT = THREE.RepeatWrapping; glazeTex.repeat.set(1.6, 1.6); const clay = tokenColor("--primary", "#cc785c"); // roughness and clearcoatRoughness MULTIPLY the map, which averages about // half, so both numbers are set roughly double what the surface should end // up at. const faceMat = new THREE.MeshPhysicalMaterial({ color: clay.clone().lerp(new THREE.Color(0xffffff), 0.12), roughness: 0.66, roughnessMap: glazeTex, metalness: 0.04, clearcoat: 1, clearcoatRoughness: 0.3, clearcoatRoughnessMap: glazeTex, envMapIntensity: 1.45 }); const sideMat = new THREE.MeshPhysicalMaterial({ color: clay.clone().multiplyScalar(0.6), roughness: 0.8, roughnessMap: glazeTex, metalness: 0.04, clearcoat: 0.6, clearcoatRoughness: 0.5, clearcoatRoughnessMap: glazeTex, envMapIntensity: 1.1 }); const geo = new THREE.ExtrudeGeometry(markShape(0.036), { depth: 0.44, bevelEnabled: true, bevelThickness: 0.055, bevelSize: 0.042, bevelOffset: 0, bevelSegments: 6, curveSegments: 1 }); geo.center(); const mark = new THREE.Mesh(geo, [faceMat, sideMat]); mark.castShadow = true; mark.receiveShadow = false; const rig = new THREE.Group(); rig.add(mark); scene.add(rig); // The floor is invisible until something is thrown onto it. const shadowMat = new THREE.ShadowMaterial({ color: 0x53301c, opacity: 0.42 }); const floor = new THREE.Mesh(new THREE.PlaneGeometry(30, 30), shadowMat); floor.rotation.x = -Math.PI / 2; floor.position.y = -1.92; floor.receiveShadow = true; scene.add(floor); const key = new THREE.DirectionalLight(0xfff4e8, 2.7); key.position.set(2.8, 6.4, 4.2); key.castShadow = true; key.shadow.mapSize.set(2048, 2048); key.shadow.camera.near = 1; key.shadow.camera.far = 24; // WIDE ENOUGH FOR THE CAST, not just for the object. At plus or minus 4.2 // the shadow ran out of the depth map before it ran out of floor and the // cast ended on a dead straight diagonal, which looks like a rendering // fault because it is one. The mark is 3.6 across and throws about six. key.shadow.camera.left = -6.5; key.shadow.camera.right = 6.5; key.shadow.camera.top = 6.5; key.shadow.camera.bottom = -6.5; key.shadow.bias = -0.0009; key.shadow.radius = 2.6; const rim = new THREE.DirectionalLight(0xd6dcea, 1.4); rim.position.set(-5.2, 1.4, -2.4); const fill = new THREE.HemisphereLight(0xffffff, 0xe6e0d1, 0.6); scene.add(key, rim, fill); const resize = () => { const w = el.clientWidth || 1; const h = el.clientHeight || 1; renderer.setSize(w, h); camera.aspect = w / h; camera.updateProjectionMatrix(); }; resize(); const started = performance.now(); let raf = 0; const tick = () => { const t = (performance.now() - started) / 1000; // Held OFF-AXIS, not swinging through square-on. A flat extruded face // seen straight down its normal reflects one constant patch of the // environment and photographs as a solid colour, which is exactly what // the wireframe version failed at. Twenty-odd degrees of standing yaw // keeps the walls of the right-hand arms turned toward the camera and // toward the key light, so the object's thickness is visible in every // frame, and the oscillation never crosses back through zero. rig.rotation.y = -0.25 + Math.sin(t * 0.19) * 0.19; rig.rotation.x = 0.15 + Math.sin(t * 0.13) * 0.06; rig.rotation.z = Math.sin(t * 0.11) * 0.1; renderer.render(scene, camera); raf = requestAnimationFrame(tick); }; tick(); const ro = new ResizeObserver(resize); ro.observe(el); return () => { cancelAnimationFrame(raf); ro.disconnect(); disposeScene(scene); envRT.texture.dispose(); skyTex.dispose(); glazeTex.dispose(); pmrem.dispose(); renderer.dispose(); el.removeChild(renderer.domElement); }; }, []); return _jsxruntime.jsx.call(void 0, 'div', { ref: host, style: { width: "100%", height: "100%", minHeight: 420 },} ); } /** One hanging finding on the interpretability slide. */ function Finding({ label, children }) { return ( _jsxruntime.jsxs.call(void 0, 'div', { style: { borderTop: "1px solid var(--hair)", paddingTop: "clamp(12px, 1.8vh, 18px)" }, children: [ _jsxruntime.jsx.call(void 0, 'div', { style: { fontFamily: "var(--font-head)", fontSize: "clamp(17px, 1.7vw, 22px)", fontWeight: 600, color: "var(--primary)", lineHeight: 1.15 }, children: label }) , _jsxruntime.jsx.call(void 0, 'p', { style: { margin: "7px 0 0", fontSize: "clamp(14px, 1.3vw, 17px)", lineHeight: 1.5, color: "var(--fg-muted)" }, children: children }) ]}) ); } function App() { return ( _jsxruntime.jsxs.call(void 0, _Deck2.default, { children: [ _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Cover", full: true, children: _jsxruntime.jsxs.call(void 0, Statement, { mark: true, foot: "anthropic.com · a public benefit corporation, founded 2021" , children: ["Building AI that people can " , _jsxruntime.jsx.call(void 0, 'span', { className: "accent-text", children: "rely on" }), "." ]}) }) /* The mission as a spread, not a centred column: a clay field holding the quotation mark and the attribution against the full height of the stage, and the sentence itself set large on the ivory beside it. */ , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Mission", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { ...SPREAD, display: "grid", gridTemplateColumns: "0.56fr 1fr" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { background: "var(--accent)", color: "var(--accent-ink)", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: "var(--gutter-y) clamp(28px, 3.6vw, 60px)", boxSizing: "border-box" }, children: [ _jsxruntime.jsx.call(void 0, Wordmark, { height: 22, invert: true,} ) , _jsxruntime.jsx.call(void 0, 'div', { 'aria-hidden': "true", style: { fontFamily: "var(--font-head)", fontSize: "clamp(120px, 15vw, 220px)", lineHeight: 0.62, fontWeight: 700, opacity: 0.55 }, children: "“" }) , _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'div', { style: { fontFamily: "var(--font-head)", fontSize: "clamp(22px, 2.2vw, 30px)", fontWeight: 600 }, children: "Anthropic" }) , _jsxruntime.jsx.call(void 0, 'div', { style: { fontSize: 15, opacity: 0.82, marginTop: 6 }, children: "Company mission, anthropic.com" }) ]}) ]}) , _jsxruntime.jsx.call(void 0, 'div', { style: { display: "flex", alignItems: "center", padding: "var(--gutter-y) clamp(32px, 4.6vw, 84px)", boxSizing: "border-box" }, children: _jsxruntime.jsx.call(void 0, 'p', { style: { margin: 0, fontFamily: "var(--font-head)", fontSize: "clamp(24px, 3.2vw, 42px)", lineHeight: 1.28, letterSpacing: "-0.01em" }, children: "We believe AI will have a vast impact on the world. Anthropic is dedicated to building systems that people can rely on and generating research about the opportunities and risks of AI." }) }) ]}) }) /* Constitutional AI as four ruled rows running the full width, rather than a band floating mid-stage. Same four steps, same words; the rows stretch to fill whatever height is left under the headline. */ , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Method", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { ...SPREAD, padding: "var(--gutter-y) var(--gutter)" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 32, paddingBottom: "clamp(16px, 2.6vh, 26px)", borderBottom: "2px solid var(--primary)" }, children: [ _jsxruntime.jsx.call(void 0, 'h2', { className: "headline", style: { margin: 0 }, children: "Train the judgement, not just the answer." }) , _jsxruntime.jsx.call(void 0, 'div', { className: "kicker", style: { color: "var(--primary)", whiteSpace: "nowrap", paddingBottom: 8 }, children: "Constitutional AI" }) ]}) , _jsxruntime.jsx.call(void 0, 'div', { style: { flex: "1 1 auto", minHeight: 0, display: "flex", flexDirection: "column" }, children: [ { title: "Write the principles", body: "A short, explicit constitution states in plain language how the model should behave." }, { title: "Critique and revise", body: "The model reads its own answer against those principles and rewrites it." }, { title: "Learn from the revisions", body: "Those rewrites become the supervised training signal." }, { title: "Rank without a human", body: "The model judges pairs of answers by the same constitution, and that preference trains the policy." } ].map((step, i) => ( _jsxruntime.jsxs.call(void 0, 'div', { style: { flex: "1 1 0", display: "grid", gridTemplateColumns: "clamp(64px, 7vw, 104px) 1fr 1.5fr", alignItems: "center", gap: "clamp(14px, 2vw, 36px)", borderBottom: i < 3 ? "1px solid var(--hair)" : "none" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { fontFamily: "var(--font-head)", fontSize: "clamp(30px, 3.4vw, 48px)", color: "var(--primary)", lineHeight: 1 }, children: ["0" , i + 1 ]}) , _jsxruntime.jsx.call(void 0, 'h3', { style: { margin: 0, fontSize: "clamp(19px, 2.1vw, 28px)", fontWeight: 600, lineHeight: 1.15 }, children: step.title }) , _jsxruntime.jsx.call(void 0, 'p', { style: { margin: 0, color: "var(--fg-muted)", fontSize: "clamp(15px, 1.4vw, 18px)", lineHeight: 1.5 }, children: step.body }) ]}, step.title) )) }) ]}) }) /* NEW. Interpretability, and the deck's most essay-ish page: a large serif statement of the method on the left, three findings hanging off hairlines on the right, and the caveat, which is the actual point of the slide, set apart on clay across the foot. Every phrase in quotation marks is Anthropic's, from "Tracing the thoughts of a large language model", 27 March 2025. The slide exists because a company publishing the limits of its own instrument is a harder thing to say than any capability claim, and no other deck in this gallery says anything of the kind. */ , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Microscope", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { ...SPREAD, padding: "var(--gutter-y) var(--gutter) 0" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 32, paddingBottom: "clamp(14px, 2.4vh, 24px)", borderBottom: "2px solid var(--primary)" }, children: [ _jsxruntime.jsx.call(void 0, 'h2', { className: "headline", style: { margin: 0, maxWidth: "20ch", fontSize: "clamp(32px, 4.6vw, 60px)" }, children: "A microscope, pointed at something we built." }) , _jsxruntime.jsx.call(void 0, 'div', { className: "kicker", style: { color: "var(--primary)", whiteSpace: "nowrap", paddingBottom: 8 }, children: "Interpretability" }) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { style: { flex: "1 1 auto", minHeight: 0, display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 clamp(28px, 5vw, 80px)" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", flexDirection: "column", justifyContent: "center", paddingRight: "clamp(0px, 2vw, 40px)", borderRight: "1px solid var(--hair-2)" }, children: [ _jsxruntime.jsx.call(void 0, 'p', { style: { margin: 0, fontFamily: "var(--font-head)", fontSize: "clamp(21px, 2.5vw, 33px)", lineHeight: 1.32, letterSpacing: "-0.01em" }, children: "Anthropic takes the method from neuroscience: build a kind of AI microscope, then trace the circuits that turn the words going in into the words coming out." }) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { margin: "clamp(16px, 2.6vh, 26px) 0 0", maxWidth: "38ch" }, children: "Anthropic, “Tracing the thoughts of a large language model”, 27 March 2025." }) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", flexDirection: "column", justifyContent: "center", gap: "clamp(12px, 2.2vh, 22px)" }, children: [ _jsxruntime.jsx.call(void 0, Finding, { label: "It thinks across languages" , children: "It sometimes reasons in a conceptual space shared between languages, which reads like a universal language of thought." }) , _jsxruntime.jsx.call(void 0, Finding, { label: "It plans ahead" , children: "Writing a poem, it settles on what it will say many words early, then writes to get there." }) , _jsxruntime.jsx.call(void 0, Finding, { label: "It can argue to agree" , children: "On occasion it produces a plausible-sounding argument built to agree with the user rather than to follow the logical steps." }) ]}) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { style: { background: "var(--accent)", color: "var(--accent-ink)", marginLeft: "calc(var(--gutter) * -1)", marginRight: "calc(var(--gutter) * -1)", padding: "clamp(20px, 3.2vh, 34px) var(--gutter)", display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: "clamp(20px, 3vw, 56px)", flexWrap: "wrap" }, children: [ _jsxruntime.jsx.call(void 0, 'p', { style: { margin: 0, fontFamily: "var(--font-head)", fontSize: "clamp(18px, 2.1vw, 27px)", lineHeight: 1.34, maxWidth: "44ch" }, children: "“Even on short, simple prompts, our method only captures a fraction of the total computation performed by Claude.”" }) , _jsxruntime.jsx.call(void 0, 'div', { style: { fontSize: 14, opacity: 0.85, whiteSpace: "nowrap" }, children: "Anthropic, on its own instrument" }) ]}) ]}) }) /* A hand-rolled chronology rather than : the component stacks vertically, so four dated entries with bodies overflow the stage and its first node collides with a two-line headline. One clay rule runs the full measure with a tick per entry, and four broadsheet columns hang off it to the bottom gutter: the year at the head of the column, the note anchored at its foot. */ , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Chronology", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { ...SPREAD, padding: "var(--gutter-y) var(--gutter)" }, children: [ _jsxruntime.jsx.call(void 0, 'h2', { className: "headline", style: { margin: 0, maxWidth: "20ch" }, children: "Research, then a policy to live by." }) , _jsxruntime.jsx.call(void 0, 'div', { style: { position: "relative", height: 2, background: "var(--primary)", marginTop: "clamp(20px, 4vh, 40px)" }, children: [0, 1, 2, 3].map((i) => ( _jsxruntime.jsx.call(void 0, 'span', { style: { position: "absolute", top: -6, left: `${i * 25}%`, transform: i === 0 ? "none" : "translateX(-50%)", width: 14, height: 14, borderRadius: "50%", background: "var(--primary)" },}, i ) )) }) , _jsxruntime.jsx.call(void 0, 'div', { style: { flex: "1 1 auto", minHeight: 0, display: "grid", gridTemplateColumns: "repeat(4, 1fr)" }, children: [ { year: "2021", title: "Founded", body: "A public benefit corporation, so the research and the business point the same way." }, { year: "Dec 2022", title: "Constitutional AI", body: "Training against written principles instead of case-by-case human labels." }, { year: "Mar 2023", title: "Claude", body: "The research reaches people as a product." }, { year: "Sep 2023", title: "Responsible Scaling", body: "Each capability threshold tied to the safeguards required to cross it." } ].map((item, i) => ( _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 20, paddingTop: "clamp(20px, 3.4vh, 34px)", paddingRight: "clamp(14px, 2vw, 34px)", paddingLeft: i === 0 ? 0 : "clamp(14px, 2vw, 34px)", borderLeft: i === 0 ? "none" : "1px solid var(--hair)" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'div', { style: { fontFamily: "var(--font-head)", fontSize: "clamp(30px, 3.6vw, 52px)", lineHeight: 1, color: "var(--primary)", letterSpacing: "-0.02em" }, children: item.year }) , _jsxruntime.jsx.call(void 0, 'div', { style: { fontFamily: "var(--font-head)", fontSize: "clamp(19px, 2vw, 26px)", fontWeight: 600, lineHeight: 1.15, marginTop: 12 }, children: item.title }) ]}) , _jsxruntime.jsx.call(void 0, 'p', { style: { margin: 0, fontSize: "clamp(14px, 1.3vw, 17px)", lineHeight: 1.5, color: "var(--fg-muted)", borderTop: "1px solid var(--hair-2)", paddingTop: 16 }, children: item.body }) ]}, item.year) )) }) ]}) }) /* NEW. The chronology ends on the Responsible Scaling Policy, so this is that policy actually biting: the ivory two thirds state the commitment, and a clay band running gutter to gutter across the foot carries the one time it has been triggered in public. The horizontal band is a shape nothing else in this deck uses. SOURCES, both Anthropic's own posts. - anthropics-responsible-scaling-policy, 19 September 2023: the ASL framework is "modeled loosely after the US government's biosafety level (BSL) standards", and the policy "implicitly requires us to temporarily pause training of more powerful models if our AI scaling outstrips our ability to comply with the necessary safety procedures". - activating-asl3-protections, 22 May 2025: Claude Opus 4 deployed with ASL-3 measures "as a precautionary and provisional action", "more than 100 different security controls", and Constitutional Classifiers that "monitor model inputs and outputs and intervene". */ , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Safeguards", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { ...SPREAD }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { flex: "1 1 auto", minHeight: 0, display: "flex", flexDirection: "column", justifyContent: "center", padding: "var(--gutter-y) var(--gutter) clamp(24px, 4vh, 46px)" }, children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "kicker", children: "Responsible Scaling Policy, 19 September 2023" }) /* TWO COLUMNS BECAUSE ONE LEFT HALF OF THE STAGE EMPTY. At a 15ch headline and a 56ch paragraph this slide used about sixty per cent of its width and the rest was ivory, which is the underfilled-stage defect the whole gallery was pulled back for. The right column is a marginal note in the sense a printed essay means it: Anthropic's own definition of the thing the left column is arguing about, hung off a clay rule and set small. It costs no height, so the clay band below is unaffected. */ , _jsxruntime.jsxs.call(void 0, 'div', { style: { marginTop: "clamp(14px, 2.2vh, 22px)", display: "grid", gridTemplateColumns: "1.15fr 0.85fr", gap: "clamp(28px, 5vw, 76px)", alignItems: "start" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'h2', { className: "headline", style: { margin: 0, maxWidth: "13ch", fontSize: "clamp(34px, 5.2vw, 66px)" }, children: "A brake the company built for itself." }) , _jsxruntime.jsx.call(void 0, 'p', { style: { margin: "clamp(18px, 3vh, 32px) 0 0", fontFamily: "var(--font-head)", fontSize: "clamp(17px, 1.95vw, 25px)", lineHeight: 1.42, color: "var(--fg-muted)" }, children: "The policy sets AI Safety Levels, modelled loosely on the US government’s biosafety levels, and commits Anthropic to pause training of more powerful models if its scaling outstrips its ability to comply with the safety procedures those levels require." }) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { style: { borderTop: "2px solid var(--primary)", paddingTop: "clamp(14px, 2.4vh, 22px)" }, children: [ _jsxruntime.jsx.call(void 0, 'p', { style: { margin: 0, fontFamily: "var(--font-head)", fontSize: "clamp(16px, 1.7vw, 22px)", lineHeight: 1.42 }, children: "“A series of technical and organizational protocols that we’re adopting to help us manage the risks of developing increasingly capable AI systems.”" }) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { margin: "clamp(12px, 2vh, 18px) 0 0", maxWidth: "none" }, children: "Anthropic, on what the policy is" }) ]}) ]}) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { style: { background: "var(--accent)", color: "var(--accent-ink)", padding: "clamp(24px, 4vh, 42px) var(--gutter)", display: "grid", gridTemplateColumns: "auto 1fr", alignItems: "center", gap: "clamp(24px, 4vw, 64px)" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'div', { style: { fontFamily: "var(--font-head)", fontSize: "clamp(44px, 6.4vw, 88px)", fontWeight: 700, lineHeight: 0.94, letterSpacing: "-0.03em" }, children: "ASL-3" }) , _jsxruntime.jsx.call(void 0, 'div', { style: { fontSize: "clamp(13px, 1.2vw, 15px)", opacity: 0.86, marginTop: 10, letterSpacing: "0.04em" }, children: "Activated 22 May 2025" }) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'p', { style: { margin: 0, fontSize: "clamp(15px, 1.5vw, 19px)", lineHeight: 1.5, maxWidth: "62ch" }, children: "Claude Opus 4 shipped under ASL-3 measures as a precautionary and provisional action: more than 100 different security controls against theft of the model weights, and Constitutional Classifiers monitoring inputs and outputs." }) , _jsxruntime.jsx.call(void 0, 'p', { style: { margin: "12px 0 0", fontSize: 13, opacity: 0.78 }, children: "anthropic.com/news/anthropics-responsible-scaling-policy and /news/activating-asl3-protections" }) ]}) ]}) ]}) }) /* This deck's 3D moment, and its only visual object. It replaced a second - the deck already had one, and repeating it flattened the set - and then the wireframe solids that replaced that. See ClayMark above for why the mark is extruded rather than drawn. */ , _jsxruntime.jsx.call(void 0, _Split2.default, { nav: "Shape", kicker: "How the work is shaped" , title: "A lab and a product company, on purpose." , body: _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [ _jsxruntime.jsx.call(void 0, 'p', { className: "lead", style: { margin: 0 }, children: "Interpretability and alignment research on one side; Claude, the API and Claude Code on the other. The structure is deliberate: the research has somewhere to land, and the products have something to stand on." }) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { margin: "22px 0 0" }, children: "Rendered here, not photographed. Anthropic’s own mark, extruded and bevelled out of its published outline and lit as a solid, over its own shadow." }) ]}) , media: _jsxruntime.jsx.call(void 0, ClayMark, {} ),} ) /* The landing. The whole deck is ivory, so the close inverts to the ink ground and lets the line run at display scale from the top rule to the bottom one. Nothing floats: the field is the slide. The mark comes back FLAT, and large, bleeding off the right edge. It is the same published outline the 3D object is extruded from, drawn once as a solid at the size a signature is set at, which is what the slide before it earns: you have just seen the thing as an object, so it can close as a sign-off. It is also the only ink-ground slide in the deck, and clay on near-black is the strongest colour contrast the brand has. */ , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Close", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { ...SPREAD, position: "relative", overflow: "hidden", background: "var(--fg)", color: "var(--bg)", justifyContent: "space-between", padding: "var(--gutter-y) var(--gutter)" }, children: [ _jsxruntime.jsx.call(void 0, 'svg', { viewBox: "0 0 100 100" , 'aria-hidden': "true", // CROPPED, and lifted to CLEAR THE BOTTOM RULE. Two rounds here. // Centred at half the stage width, the lowest arm ran straight // through the hairline and behind "claude.ai", and a rule crossing // a mark reads as a mistake rather than as a layer. Pulled small // enough to clear it, the mark stopped being a field and became a // logo parked in a corner. So it is bled off both the top and the // right instead: big enough to be the second thing on the slide, // and obviously a crop rather than a placement. style: { position: "absolute", right: "-14%", top: "36%", transform: "translateY(-50%)", width: "min(50%, 82vh)", height: "auto", opacity: 0.9, pointerEvents: "none" }, children: _jsxruntime.jsx.call(void 0, 'path', { d: MARK_PATH, fill: "var(--primary)",} ) }) , _jsxruntime.jsx.call(void 0, 'div', { style: { position: "relative", zIndex: 1 }, children: _jsxruntime.jsx.call(void 0, Wordmark, { height: 26, invert: true,} ) }) , _jsxruntime.jsxs.call(void 0, 'h2', { className: "display", style: { margin: 0, maxWidth: "9ch", color: "var(--bg)", position: "relative", zIndex: 1 }, children: ["Talk to " , _jsxruntime.jsx.call(void 0, 'span', { className: "accent-text", children: "Claude"}), "." ]}) , _jsxruntime.jsxs.call(void 0, 'div', { style: { position: "relative", zIndex: 1, display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24, borderTop: "1px solid rgba(240, 238, 230, 0.28)", paddingTop: 20 }, children: [ _jsxruntime.jsx.call(void 0, 'div', { className: "kicker", style: { color: "rgba(240, 238, 230, 0.62)" }, children: "Start here" }) , _jsxruntime.jsx.call(void 0, 'div', { style: { fontFamily: "var(--font-head)", fontSize: "clamp(18px, 2vw, 26px)", color: "var(--bg)" }, children: "claude.ai" }) ]}) ]}) }) ]}) ); } exports.default = App;

Anthropic: Building AI that people can rely on