diff --git a/frontend/src/components.ts b/frontend/src/components.ts index f5d6f9d..b24ff59 100644 --- a/frontend/src/components.ts +++ b/frontend/src/components.ts @@ -64,7 +64,7 @@ function detail(current: Chapter, story: Story): string { return `
Components / ${esc(current.title)}

${esc(story.title)}

- ${story.components.length ? `
${story.components.map((c) => `${esc(c)}`).join("")}
` : `
`} +

${story.components.map(esc).join(" · ")}

`; diff --git a/frontend/src/home.ts b/frontend/src/home.ts index 5437215..2c970fd 100644 --- a/frontend/src/home.ts +++ b/frontend/src/home.ts @@ -1,71 +1,121 @@ import Lenis from "lenis"; import "lenis/dist/lenis.css"; -import { REPO, chapters, componentCount, storyCount } from "./data"; +import { REPO, chapters, componentCount, esc, storyCount } from "./data"; import { icon } from "./icons"; +import { app, bars, candles, chat, type Model } from "./iso/models"; +import { stage } from "./iso/stage"; import { preview } from "./preview"; import { onMode } from "./theme"; -const FEATURED = { page: "forms", story: "input-textfield-clearableinput", title: "Input / TextField · ClearableInput" }; +interface Show { + glyph: "circle" | "square" | "triangle"; + name: string; + line: string; + page: string; + story: string; + title: string; + model: () => Model; +} -/** Folding tiles, a few facts, one component live. */ +const SHOWS: Show[] = [ + { + glyph: "circle", + name: "Finance", + line: "Candles, volume and a crosshair. Drag to pan, Cmd-scroll to zoom, switch the chart type.", + page: "finance", + story: "candlestickchart-ohlcchart-heikinashichart-linequotechart-volumechart-charttypeswitcher-timerangeselector-intervalselector", + title: "CandlestickChart", + model: candles, + }, + { + glyph: "square", + name: "Charts", + line: "A year in two series. Hover for values, drag across to zoom, press a name to hide it.", + page: "charts", + story: "linechart-chartaxis-chartgrid-chartlegend-charttooltip-chartcrosshair-chartannotation-chartzoom-chartexport", + title: "LineChart", + model: bars, + }, + { + glyph: "triangle", + name: "AI chat", + line: "Bubbles, avatars, math and code, the way a model answers.", + page: "chat", + story: "chatcontainer-messagelist-messagebubble-messageavatar-messageheader-messagefooter-dateseparator-scrolltobottombutton", + title: "ChatContainer", + model: chat, + }, +]; + +/** A miniature that grows to a marimba, then each model beside the real thing. */ export function home(main: HTMLElement): () => void { document.title = "Ely · GPUI components"; main.innerHTML = ` -
- +
-

Ely, a component library for GPUI.Every one of them runs here, live.

-

${componentCount} components in ${chapters.length} chapters, in light and dark, written in Rust and compiled to WebAssembly for this page.

+ +

A component library for GPUI.Every part runs on this page.

+

${componentCount} components in ${chapters.length} chapters, written in Rust, compiled to WebAssembly. Point at the model. Turn the sound on.

Browse components ${icon("ArrowRight")} ${icon("GitHub")}GitHub
-
-
-
In numbers
-

One crate, one theme, every part tested at 280 pixels wide.

-
-
${storyCount}stories, each its own page
-
${chapters.length}chapters, from primitives to maps
-
2modes, light and dark, from one palette
-
0screenshots: what you see is running
-
+
-
-
Try one
-

A text field, live. Type in it.

-
+ ${SHOWS.map( + (s, i) => `
+
+
+ + ${String(i + 1).padStart(2, "0")} +

${esc(s.name)}

+

${esc(s.line)}

+
+
+
+
+
`, + ).join("")} +
+
${storyCount}stories, each its own page
+
${chapters.length}chapters, primitives to maps
+
2modes from one palette
+
0screenshots
`; const still = matchMedia("(prefers-reduced-motion: reduce)").matches; const lenis = still ? null : new Lenis({ autoRaf: true, anchors: true }); - const hero = main.querySelector(".hero")!; - // The pinned hero folds as it scrolls. - const fold = () => Math.min(1, Math.max(0, scrollY / Math.max(hero.offsetHeight - innerHeight, 1))); - let stops: Array<() => void> = []; - let sceneStop = () => {}; - // three.js loads only here. - import("./scene").then(({ scene }) => { - if (!hero.isConnected) return; - const s = scene(main.querySelector("canvas")!, fold, still); - sceneStop = s.stop; - stops.push(onMode(() => s.paint())); - }); + const iso = stage(still); + iso.add(main.querySelector(".hero-iso")!, app()); + main.querySelectorAll(".pair .iso-host").forEach((host, i) => iso.add(host, SHOWS[i].model())); + const stopMode = onMode(() => iso.paint()); - const stage = main.querySelector(".home-stage")!; - const lazy = new IntersectionObserver(([entry]) => { - if (!entry.isIntersecting) return; - lazy.disconnect(); - stops.push(preview(stage, FEATURED.page, FEATURED.story, FEATURED.title)); - }, { rootMargin: "200px" }); - lazy.observe(stage); + // A live example loads near the view and unloads far from it. + const stops = new Map void>(); + const near = new IntersectionObserver( + (entries) => { + for (const e of entries) { + const host = e.target as HTMLElement; + const show = SHOWS[Number(host.dataset.i)]; + if (e.isIntersecting && !stops.has(host)) { + stops.set(host, preview(host, show.page, show.story, show.title)); + } else if (!e.isIntersecting && stops.has(host)) { + stops.get(host)!(); + stops.delete(host); + host.innerHTML = ""; + } + } + }, + { rootMargin: "100% 0px" }, + ); + main.querySelectorAll(".live").forEach((host) => near.observe(host)); return () => { lenis?.destroy(); - lazy.disconnect(); - sceneStop(); + near.disconnect(); stops.forEach((stop) => stop()); - stops = []; + stopMode(); + iso.stop(); }; } diff --git a/frontend/src/icons.ts b/frontend/src/icons.ts index 26b2f43..27298a5 100644 --- a/frontend/src/icons.ts +++ b/frontend/src/icons.ts @@ -7,9 +7,11 @@ import Minimize from "reicon/icons/Minimize"; import Moon from "reicon/icons/Moon"; import Refresh from "reicon/icons/Refresh"; import Search from "reicon/icons/Search"; +import Sound from "reicon/icons/Sound"; import Sun from "reicon/icons/Sun"; +import VolumeCross from "reicon/icons/VolumeCross"; -const set = { ArrowLeft, ArrowRight, ArrowRightUp, ChevronRight, Maximize, Minimize, Moon, Refresh, Search, Sun }; +const set = { ArrowLeft, ArrowRight, ArrowRightUp, ChevronRight, Maximize, Minimize, Moon, Refresh, Search, Sound, Sun, VolumeCross }; // simple-icons' GitHub mark (CC0), since Reicon has none. const GITHUB = diff --git a/frontend/src/iso/marimba.ts b/frontend/src/iso/marimba.ts new file mode 100644 index 0000000..64b7ae4 --- /dev/null +++ b/frontend/src/iso/marimba.ts @@ -0,0 +1,62 @@ +/** A sixteenth at 132 beats a minute. */ +export const BEAT = 60_000 / 132 / 4; + +// C major pentatonic, C4 to E6. +const SCALE = [0, 2, 4, 7, 9, 12, 14, 16, 19, 21, 24, 26, 28]; +const LISTENERS = new Set<(on: boolean) => void>(); + +let context: AudioContext | null = null; +let bus: GainNode | null = null; +let on = false; +let last = 0; + +export function soundOn(): boolean { + return on; +} + +/** Turns sound on or off; the first turn on needs a press, as browsers ask. */ +export function setSound(next: boolean): void { + on = next; + if (on && !context) { + context = new AudioContext(); + bus = context.createGain(); + bus.gain.value = 0.28; + const squeeze = context.createDynamicsCompressor(); + bus.connect(squeeze).connect(context.destination); + console.info("marimba: audio started"); + } + if (on) void context!.resume(); + LISTENERS.forEach((listen) => listen(on)); +} + +export function onSound(listen: (on: boolean) => void): () => void { + LISTENERS.add(listen); + return () => LISTENERS.delete(listen); +} + +/** Strikes the scale's `step`th note, soft or hard; strikes within 30 ms merge. */ +export function strike(step: number, velocity = 0.7): void { + if (!on || !context || !bus) return; + const now = context.currentTime; + if (now - last < 0.03) return; + last = now; + const index = ((step % SCALE.length) + SCALE.length) % SCALE.length; + const hz = 261.63 * 2 ** (SCALE[index] / 12); + // A struck bar: the fundamental, a partial near four times up, a short click. + for (const [ratio, gain, decay] of [ + [1, 1, 0.9], + [3.93, 0.28, 0.18], + [9.2, 0.06, 0.05], + ]) { + const tone = context.createOscillator(); + const env = context.createGain(); + tone.type = "sine"; + tone.frequency.value = hz * ratio; + env.gain.setValueAtTime(0, now); + env.gain.linearRampToValueAtTime(gain * velocity, now + 0.004); + env.gain.exponentialRampToValueAtTime(0.0001, now + decay); + tone.connect(env).connect(bus); + tone.start(now); + tone.stop(now + decay + 0.05); + } +} diff --git a/frontend/src/iso/models.ts b/frontend/src/iso/models.ts new file mode 100644 index 0000000..7c9345f --- /dev/null +++ b/frontend/src/iso/models.ts @@ -0,0 +1,95 @@ +export type Tone = "paper" | "ink" | "soft" | "accent"; + +/** A box on the table: cell, footprint, lift, height, tone, the beat it grows on. */ +export interface Block { + x: number; + z: number; + w: number; + d: number; + y: number; + h: number; + tone: Tone; + beat: number; +} + +export type Model = { blocks: Block[]; span: [number, number] }; + +const block = (x: number, z: number, w: number, d: number, h: number, tone: Tone, y = 0): Block => ({ + x, z, w, d, y, h, tone, beat: 0, +}); + +/** Beats from the far corner toward the eye, one diagonal a step. */ +function sweep(blocks: Block[], pace = 1): Block[] { + return blocks.map((b) => ({ ...b, beat: b.beat || Math.round((b.x + b.z) * pace) })); +} + +/** A small app on its slab: a sidebar, a chart, a chat, a switch. */ +export function app(): Model { + const b: Block[] = [block(0, 0, 18, 12, 0.5, "paper")]; + b.push(block(0.5, 0.5, 17, 1, 0.3, "soft", 0.5)); + for (let i = 0; i < 3; i++) b.push(block(1 + i * 0.9, 0.8, 0.5, 0.4, 0.3, i === 0 ? "accent" : "ink", 0.8)); + for (let i = 0; i < 6; i++) b.push(block(0.8, 2.2 + i * 1.5, 3.4, 1, 0.3, i === 1 ? "accent" : "soft", 0.5)); + b.push(block(5, 2.2, 7.4, 1, 0.25, "soft", 0.5)); + b.push(block(5, 4, 7.4, 5.6, 0.12, "soft", 0.5)); + const bars = [0.9, 1.5, 1.2, 2.1, 1.7, 2.8, 2.3, 3.2]; + bars.forEach((h, i) => b.push(block(5.4 + i * 0.85, 7.2, 0.55, 1.2, h, i === 5 ? "accent" : "ink", 0.62))); + b.push(block(5.4, 10.4, 6.6, 0.3, 0.15, "soft", 0.5)); + b.push(block(8.4, 10.3, 0.5, 0.5, 0.5, "accent", 0.5)); + for (let i = 0; i < 4; i++) { + const mine = i % 2 === 1; + b.push(block(mine ? 14.2 : 13, 2.2 + i * 1.7, mine ? 2.8 : 3.6, 1.2, 0.5, mine ? "ink" : "soft", 0.5)); + } + b.push(block(13, 9.6, 1.6, 0.8, 0.35, "soft", 0.5)); + b.push(block(13.9, 9.6, 0.7, 0.8, 0.7, "accent", 0.5)); + return { blocks: sweep(b, 0.9), span: [18, 12] }; +} + +/** Twenty candles and their volume, rising in the accent, falling in ink. */ +export function candles(): Model { + const b: Block[] = [block(0, 0, 21, 8, 0.3, "paper")]; + const days: Array<[number, number, number, number]> = []; + let close = 0; + for (let i = 0; i < 20; i++) { + const open = close; + close = open + Math.sin(i * 1.7) * 1.1 + Math.cos(i * 0.6) * 0.6 + 0.25; + days.push([open, close, Math.min(open, close) - 0.4 - (i % 3) * 0.2, Math.max(open, close) + 0.35 + (i % 2) * 0.3]); + } + // Prices fill 0.9 to 4.5 above the slab. + const floor = Math.min(...days.map((d) => d[2])); + const range = Math.max(...days.map((d) => d[3])) - floor; + const lift = (price: number) => 0.9 + ((price - floor) / range) * 3.6; + days.forEach(([open, close, low, high], i) => { + const x = 0.7 + i; + b.push({ ...block(x + 0.33, 2.73, 0.14, 0.14, lift(high) - lift(low), "soft", lift(low)), beat: 2 + i * 2 }); + const [bottom, top] = [lift(Math.min(open, close)), lift(Math.max(open, close))]; + b.push({ ...block(x, 2.4, 0.8, 0.8, Math.max(top - bottom, 0.2), close >= open ? "accent" : "ink", bottom), beat: 3 + i * 2 }); + b.push({ ...block(x, 5, 0.8, 1.6, 0.2 + ((i * 7) % 5) * 0.22, "soft", 0.3), beat: 3 + i * 2 }); + }); + return { blocks: sweep(b), span: [21, 8] }; +} + +/** Five series of eight months, one in the accent. */ +export function bars(): Model { + const b: Block[] = [block(0, 0, 11, 8, 0.3, "paper")]; + for (let z = 0; z < 5; z++) { + for (let x = 0; x < 8; x++) { + const h = 0.4 + 2.2 * (0.5 + 0.5 * Math.sin(x * 0.7 + z * 1.1)) * (1 + z * 0.12); + const tone: Tone = z === 2 ? "accent" : z === 4 ? "ink" : "soft"; + b.push({ ...block(1 + x * 1.2, 1 + z * 1.3, 0.8, 0.8, h, tone, 0.3), beat: x * 2 + z }); + } + } + return { blocks: b, span: [11, 8] }; +} + +/** A conversation: turns left and right, and three dots still typing. */ +export function chat(): Model { + const b: Block[] = [block(0, 0, 10, 12, 0.3, "paper")]; + const turns: Array<[boolean, number]> = [[false, 6], [true, 4.4], [false, 7.2], [true, 3.2], [false, 5.4]]; + turns.forEach(([mine, w], i) => { + const z = 1 + i * 2; + if (!mine) b.push({ ...block(0.8, z + 0.3, 0.8, 0.8, 0.8, "ink", 0.3), beat: i * 4 }); + b.push({ ...block(mine ? 9.2 - w : 2, z, w, 1.4, 0.45, mine ? "accent" : "soft", 0.3), beat: i * 4 + 1 }); + }); + for (let i = 0; i < 3; i++) b.push({ ...block(2.2 + i * 0.7, 10.9, 0.45, 0.45, 0.45, "ink", 0.3), beat: 21 + i }); + return { blocks: b, span: [10, 12] }; +} diff --git a/frontend/src/iso/stage.ts b/frontend/src/iso/stage.ts new file mode 100644 index 0000000..7231d8f --- /dev/null +++ b/frontend/src/iso/stage.ts @@ -0,0 +1,200 @@ +import * as THREE from "three"; +import { BEAT, strike } from "./marimba"; +import type { Block, Model, Tone } from "./models"; + +const GROW = 260; +const BUMP = 420; + +interface Scene { + host: HTMLElement; + model: Model; + world: THREE.Scene; + camera: THREE.OrthographicCamera; + mesh: THREE.InstancedMesh; + grid: THREE.LineSegments; + started: number | null; + struck: number; + bumps: Map; +} + +const box = new THREE.BoxGeometry(1, 1, 1).translate(0.5, 0.5, 0.5); +const at = new THREE.Object3D(); +const ray = new THREE.Raycaster(); +const tones: Record = { paper: new THREE.Color(), ink: new THREE.Color(), soft: new THREE.Color(), accent: new THREE.Color() }; +const lines = new THREE.Color(); + +/** Back-out easing: a block overshoots, then settles on its height. */ +const rise = (t: number) => 1 + 2.2 * (t - 1) ** 3 + 1.2 * (t - 1) ** 2; + +/** Isometric dioramas, one canvas over the page, each drawn in its host's box. */ +export function stage(still: boolean) { + const canvas = document.createElement("canvas"); + canvas.className = "iso"; + canvas.setAttribute("aria-hidden", "true"); + document.body.append(canvas); + const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true }); + renderer.setPixelRatio(Math.min(devicePixelRatio, 2)); + renderer.setScissorTest(true); + renderer.shadowMap.enabled = true; + renderer.shadowMap.type = THREE.PCFSoftShadowMap; + const scenes: Scene[] = []; + let frame = 0; + + const paint = () => { + const css = getComputedStyle(document.documentElement); + for (const tone of Object.keys(tones) as Tone[]) tones[tone].set(css.getPropertyValue(`--iso-${tone}`).trim()); + lines.set(css.getPropertyValue("--line").trim()); + for (const s of scenes) { + s.model.blocks.forEach((b, i) => s.mesh.setColorAt(i, tones[b.tone])); + s.mesh.instanceColor!.needsUpdate = true; + (s.grid.material as THREE.LineBasicMaterial).color.copy(lines); + } + }; + + const place = (s: Scene, now: number) => { + let moving = false; + s.model.blocks.forEach((b: Block, i) => { + const since = s.started === null ? -1 : now - s.started - b.beat * BEAT; + const grown = still ? 1 : since < 0 ? 0 : since >= GROW ? 1 : rise(since / GROW); + const bump = s.bumps.get(i); + const lift = bump === undefined ? 0 : Math.max(0, 1 - (now - bump) / BUMP); + if (bump !== undefined && lift === 0) s.bumps.delete(i); + moving ||= (since >= 0 && since < GROW) || lift > 0 || (s.started !== null && since < 0); + at.position.set(b.x, b.y, b.z); + at.scale.set(b.w, Math.max(b.h * grown * (1 + 0.5 * Math.sin(lift * Math.PI)), 0.0001), b.d); + at.updateMatrix(); + s.mesh.setMatrixAt(i, at.matrix); + }); + s.mesh.instanceMatrix.needsUpdate = true; + // One note for each beat that starts a block. + if (s.started !== null && !still) { + const beat = Math.floor((now - s.started) / BEAT); + for (; s.struck <= beat; s.struck++) { + const first = s.model.blocks.findIndex((b) => b.beat === s.struck); + if (first >= 0) strike(s.struck + Math.round(s.model.blocks[first].h)); + } + } + return moving; + }; + + const draw = (now: number) => { + frame = 0; + const { innerWidth: w, innerHeight: h } = window; + renderer.setSize(w, h, false); + renderer.setScissor(0, 0, w, h); + renderer.clear(); + let again = false; + for (const s of scenes) { + const r = s.host.getBoundingClientRect(); + if (r.bottom < 0 || r.top > h || r.width === 0) continue; + again = place(s, now) || again; + fit(s, r.width / r.height); + renderer.setViewport(r.left, h - r.bottom, r.width, r.height); + renderer.setScissor(r.left, h - r.bottom, r.width, r.height); + renderer.render(s.world, s.camera); + } + if (again) request(); + }; + const request = () => { + if (!frame) frame = requestAnimationFrame(draw); + }; + + const seen = new IntersectionObserver((entries) => { + for (const e of entries) { + const s = scenes.find((x) => x.host === e.target); + if (s && e.isIntersecting && s.started === null) { + s.started = performance.now(); + console.info(`iso: ${s.host.dataset.model} grows`); + } + } + request(); + }, { threshold: 0.35 }); + + addEventListener("scroll", request, { passive: true }); + addEventListener("resize", request); + + return { + /** Grows `model` in `host` once it shows; pointing at a block strikes it. */ + add(host: HTMLElement, model: Model) { + const world = new THREE.Scene(); + world.add(new THREE.HemisphereLight(0xffffff, 0x9a9a9a, 1.6)); + const [w, d] = model.span; + const sun = new THREE.DirectionalLight(0xffffff, 1.9); + sun.position.set(w / 2 - 12, 30, d / 2 + 7); + sun.target.position.set(w / 2, 0, d / 2); + sun.castShadow = true; + sun.shadow.mapSize.set(2048, 2048); + sun.shadow.radius = 4; + sun.shadow.bias = -0.0006; + Object.assign(sun.shadow.camera, { left: -w, right: w, top: w, bottom: -w, near: 1, far: 90 }); + world.add(sun, sun.target); + const mesh = new THREE.InstancedMesh(box, new THREE.MeshLambertMaterial(), model.blocks.length); + mesh.castShadow = mesh.receiveShadow = true; + // The table: its grid, and a floor that shows only the shadow the model casts. + const floor = new THREE.Mesh(new THREE.PlaneGeometry(w * 3, d * 3).rotateX(-Math.PI / 2), new THREE.ShadowMaterial({ opacity: 0.12 })); + floor.position.set(w / 2, -0.001, d / 2); + floor.receiveShadow = true; + const grid = new THREE.LineSegments(table(w, d), new THREE.LineBasicMaterial({ transparent: true, opacity: 0.9 })); + world.add(mesh, floor, grid); + const s: Scene = { host, model, world, camera: new THREE.OrthographicCamera(), mesh, grid, started: null, struck: 0, bumps: new Map() }; + scenes.push(s); + paint(); + place(s, performance.now()); + host.addEventListener("pointermove", (e) => { + const r = host.getBoundingClientRect(); + ray.setFromCamera(new THREE.Vector2(((e.clientX - r.left) / r.width) * 2 - 1, -((e.clientY - r.top) / r.height) * 2 + 1), s.camera); + const hit = ray.intersectObject(mesh)[0]; + if (hit?.instanceId === undefined || hit.instanceId === 0 || s.bumps.has(hit.instanceId)) return; + s.bumps.set(hit.instanceId, performance.now()); + strike(hit.instanceId + Math.round(model.blocks[hit.instanceId].h), 0.5); + request(); + }); + host.addEventListener("click", () => { + s.started = performance.now(); + s.struck = 0; + request(); + }); + seen.observe(host); + }, + paint: () => (paint(), request()), + stop() { + cancelAnimationFrame(frame); + seen.disconnect(); + removeEventListener("scroll", request); + removeEventListener("resize", request); + for (const s of scenes) (s.mesh.material as THREE.Material).dispose(); + renderer.dispose(); + canvas.remove(); + }, + }; +} + +/** Grid lines a cell apart around the slab, a drafting table under the model. */ +function table(w: number, d: number): THREE.BufferGeometry { + const points: number[] = []; + const [x0, x1, z0, z1] = [-4, w + 4, -4, d + 4]; + for (let x = x0; x <= x1; x++) points.push(x, 0, z0, x, 0, z1); + for (let z = z0; z <= z1; z++) points.push(x0, 0, z, x1, 0, z); + return new THREE.BufferGeometry().setAttribute("position", new THREE.Float32BufferAttribute(points, 3)); +} + +/** A true isometric view that keeps the model's table and tallest block in the box. */ +function fit(s: Scene, aspect: number) { + const [w, d] = s.model.span; + const tall = Math.max(...s.model.blocks.map((b) => b.y + b.h)); + const centre = new THREE.Vector3(w / 2, tall / 3, d / 2); + s.camera.position.copy(centre).add(new THREE.Vector3(1, 1, 1).multiplyScalar(60)); + s.camera.up.set(0, 1, 0); + s.camera.lookAt(centre); + // The table's diagonal and the tallest block set the half extents. + const across = ((w + d) * Math.SQRT1_2) / 2 + 0.6; + const high = ((w + d) * 0.41) / 2 + tall * 0.82 / 2 + 0.6; + const half = Math.max(across / aspect, high); + s.camera.left = -half * aspect; + s.camera.right = half * aspect; + s.camera.top = half; + s.camera.bottom = -half; + s.camera.near = 0.1; + s.camera.far = 400; + s.camera.updateProjectionMatrix(); +} diff --git a/frontend/src/main.ts b/frontend/src/main.ts index a57a445..473a60a 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -5,6 +5,7 @@ import { components } from "./components"; import { REPO } from "./data"; import { home } from "./home"; import { icon } from "./icons"; +import { onSound, setSound, soundOn } from "./iso/marimba"; import { menu } from "./menu"; import { search } from "./search"; import { mode, setMode } from "./theme"; @@ -43,6 +44,7 @@ bar.innerHTML = `
+ ${icon("GitHub")}
`; @@ -66,6 +68,16 @@ modeButton.addEventListener("click", () => { }); drawMode(); +const soundButton = bar.querySelector("[data-sound]")!; +const drawSound = (on: boolean) => { + soundButton.innerHTML = icon(on ? "Sound" : "VolumeCross"); + soundButton.setAttribute("aria-label", on ? "Sound off" : "Sound on"); + soundButton.setAttribute("aria-pressed", String(on)); +}; +soundButton.addEventListener("click", () => setSound(!soundOn())); +onSound(drawSound); +drawSound(false); + bar.querySelector("[data-find]")!.addEventListener("click", search(go)); menu(bar.querySelector("[data-menu]")!, go); diff --git a/frontend/src/scene.ts b/frontend/src/scene.ts deleted file mode 100644 index 9a6363d..0000000 --- a/frontend/src/scene.ts +++ /dev/null @@ -1,106 +0,0 @@ -import * as THREE from "three"; -import { RoundedBoxGeometry } from "three/addons/geometries/RoundedBoxGeometry.js"; -import { chapters } from "./data"; - -const STEP = 1.2; - -/** A tile per story, folding into chapter columns. */ -export function scene(canvas: HTMLCanvasElement, fold: () => number, still: boolean): { stop: () => void; paint: () => void } { - const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true }); - renderer.setPixelRatio(Math.min(devicePixelRatio, 2)); - const camera = new THREE.PerspectiveCamera(32, 1, 0.1, 200); - const world = new THREE.Scene(); - world.add(new THREE.HemisphereLight(0xffffff, 0x888888, 2.2)); - const sun = new THREE.DirectionalLight(0xffffff, 1.2); - sun.position.set(-6, 10, 12); - world.add(sun); - - const tiles = chapters.flatMap((c, col) => c.stories.map((_, row) => ({ col, row }))); - const mesh = new THREE.InstancedMesh( - new RoundedBoxGeometry(1, 1, 0.24, 3, 0.16), - new THREE.MeshStandardMaterial({ roughness: 0.7, metalness: 0 }), - tiles.length, - ); - world.add(mesh); - - // At rest a near-square lattice; folded, one column per chapter. - const across = Math.ceil(Math.sqrt(tiles.length * 1.6)); - const rest = tiles.map((_, i) => new THREE.Vector3(((i % across) - across / 2) * STEP, (Math.floor(i / across) - tiles.length / across / 2) * -STEP, 0)); - const tallest = Math.max(...chapters.map((c) => c.stories.length)); - const folded = tiles.map(({ col, row }) => new THREE.Vector3((col - chapters.length / 2) * STEP * 0.9, (row - tallest / 2) * -STEP * 0.5, 0)); - // The tiles' widest and tallest reach, kept in view. - const reach = { w: Math.max(across, chapters.length * 0.9) * STEP + 2, h: Math.max(tiles.length / across, tallest * 0.5) * STEP + 2 }; - let distance = 34; - - const paint = () => { - const css = getComputedStyle(document.documentElement); - const [ink, accent] = [new THREE.Color(css.getPropertyValue("--line").trim()), new THREE.Color(css.getPropertyValue("--accent").trim())]; - // About one tile in ten wears the accent. - tiles.forEach((_, i) => mesh.setColorAt(i, (i * 7) % 10 === 3 ? accent : ink)); - mesh.instanceColor!.needsUpdate = true; - }; - - const size = () => { - const { clientWidth: w, clientHeight: h } = canvas; - renderer.setSize(w, h, false); - camera.aspect = w / Math.max(h, 1); - camera.updateProjectionMatrix(); - const k = 2 * Math.tan(THREE.MathUtils.degToRad(camera.fov / 2)); - distance = Math.max(reach.w / (k * camera.aspect), reach.h / k); - }; - - const at = new THREE.Object3D(); - const spot = new THREE.Vector3(); - let running = true; - let frame = 0; - const draw = (time: number) => { - const t = still ? 0 : fold(); - const ease = t * t * (3 - 2 * t); - tiles.forEach((_, i) => { - spot.lerpVectors(rest[i], folded[i], ease); - const wave = still ? 0 : Math.sin(time / 1400 + rest[i].x * 0.35 + rest[i].y * 0.2) * 0.35 * (1 - ease); - at.position.set(spot.x, spot.y, wave); - at.rotation.set(-0.5 * (1 - ease), 0, 0); - at.scale.setScalar(1 - 0.45 * ease); - at.updateMatrix(); - mesh.setMatrixAt(i, at.matrix); - }); - mesh.instanceMatrix.needsUpdate = true; - camera.position.set(0, -0.12 * distance * (1 - ease), distance); - camera.lookAt(0, 0, 0); - renderer.render(world, camera); - if (running && !still) frame = requestAnimationFrame(draw); - }; - const start = () => { - cancelAnimationFrame(frame); - frame = requestAnimationFrame(draw); - }; - - const seen = new IntersectionObserver(([entry]) => { - running = entry.isIntersecting && !document.hidden; - if (running) start(); - }); - seen.observe(canvas); - const visible = () => { - running = !document.hidden; - if (running) start(); - }; - const resized = new ResizeObserver(() => (size(), start())); - resized.observe(canvas); - document.addEventListener("visibilitychange", visible); - paint(); - size(); - start(); - - const stop = () => { - running = false; - cancelAnimationFrame(frame); - seen.disconnect(); - resized.disconnect(); - document.removeEventListener("visibilitychange", visible); - renderer.dispose(); - mesh.geometry.dispose(); - (mesh.material as THREE.Material).dispose(); - }; - return { stop, paint: () => (paint(), start()) }; -} diff --git a/frontend/src/style.css b/frontend/src/style.css index 8b8b701..e3fd9da 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -6,6 +6,10 @@ --hover: #f2f0ed; --accent: #3772bb; --overlay: #ffffff; + --iso-paper: #ffffff; + --iso-soft: #e3dfda; + --iso-ink: #2b2927; + --iso-accent: #3772bb; --sans: "Geist Variable", system-ui, sans-serif; --mono: "Geist Mono Variable", ui-monospace, monospace; color-scheme: light; @@ -19,6 +23,10 @@ --hover: #252422; --accent: #69a1e8; --overlay: #1c1a19; + --iso-paper: #2e2b29; + --iso-soft: #45413d; + --iso-ink: #d8d4cf; + --iso-accent: #69a1e8; color-scheme: dark; } @@ -45,11 +53,21 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0; .label { font: 500 12px/16px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } +/* Geometry: circle, square, triangle, the site's three marks. */ +i.circle, i.square, i.triangle { display: inline-block; width: 16px; height: 16px; flex: none; } +i.circle { border-radius: 50%; background: var(--accent); } +i.square { background: var(--fg); } +i.triangle { background: var(--fg); clip-path: polygon(50% 0, 100% 100%, 0 100%); } + +/* The dioramas' one canvas; each draws in its host's box. */ +canvas.iso { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 5; } +.iso-host { position: relative; cursor: crosshair; } + /* Header */ .bar { position: sticky; top: 0; z-index: 20; height: 56px; display: flex; align-items: center; gap: 24px; padding: 0 24px; - background: color-mix(in srgb, var(--bg) 84%, transparent); + background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); } @@ -57,12 +75,12 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0; .bar nav { display: flex; gap: 4px; } .bar .end { margin-left: auto; display: flex; align-items: center; gap: 4px; } .link { padding: 4px 12px; border-radius: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--muted); } -.link:hover, .link[aria-current="page"], .link[aria-expanded="true"] { color: var(--fg); background: var(--hover); } +.link:hover, .link[aria-current="page"], .link[aria-expanded="true"] { color: var(--fg); } .tool { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--muted); } -.tool:hover { color: var(--fg); background: var(--hover); } +.tool:hover, .tool[aria-pressed="true"] { color: var(--fg); } .find { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 4px; border-radius: 8px; color: var(--muted); font-size: 14px; } -.find:hover { background: var(--hover); color: var(--fg); } -.find kbd { font: 500 12px/16px var(--mono); padding: 0 4px; border: 1px solid var(--line); border-radius: 4px; } +.find:hover { color: var(--fg); } +.find kbd { font: 500 12px/16px var(--mono); } /* Cascading menu */ .menu { @@ -72,47 +90,45 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0; } .menu a, .menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 4px 8px; min-height: 32px; border-radius: 8px; font-size: 14px; line-height: 20px; text-align: left; } .menu a:hover, .menu button:hover, .menu [aria-expanded="true"], .menu :focus-visible { background: var(--hover); outline: none; } -.menu .count { color: var(--muted); font: 500 12px/16px var(--mono); } /* Components page */ .docs { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: calc(100vh - 56px); } -.side { position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; padding: 24px 12px 48px; border-right: 1px solid var(--line); } +.side { position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; padding: 24px 16px 48px; border-right: 1px solid var(--line); } .side input { appearance: none; width: 100%; height: 32px; margin-bottom: 16px; padding: 0 12px; font: inherit; font-size: 14px; color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: 8px; } .side input::placeholder { color: var(--muted); } .side input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; } -.side .chapter { display: flex; gap: 8px; align-items: center; width: 100%; padding: 4px 8px; min-height: 32px; border-radius: 8px; font-size: 14px; line-height: 20px; color: var(--muted); } -.side .chapter .n { font: 500 12px/16px var(--mono); width: 20px; } -.side .chapter:hover { background: var(--hover); color: var(--fg); } +.side .chapter { display: flex; gap: 8px; align-items: center; width: 100%; padding: 4px 0; min-height: 32px; font-size: 14px; line-height: 20px; color: var(--muted); } +.side .chapter .n { font: 500 12px/16px var(--mono); width: 24px; } +.side .chapter:hover { color: var(--fg); } .side .chapter[aria-current="true"] { color: var(--fg); font-weight: 500; } -.side ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 28px; } -.side li a { display: block; padding: 4px 8px; border-radius: 8px; font-size: 14px; line-height: 20px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.side li a:hover { background: var(--hover); color: var(--fg); } -.side li a[aria-current="page"] { color: var(--fg); background: var(--hover); box-shadow: inset 2px 0 0 var(--accent); } -.side .none { padding: 8px; font-size: 14px; color: var(--muted); } +.side ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 32px; } +.side li a { display: block; padding: 4px 0; font-size: 14px; line-height: 20px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.side li a:hover { color: var(--fg); } +.side li a[aria-current="page"] { color: var(--fg); font-weight: 500; } +.side .none { padding: 8px 0; font-size: 14px; color: var(--muted); } .detail { padding: 48px 48px 96px; max-width: 1136px; } .crumb { font-size: 14px; line-height: 20px; color: var(--muted); } .crumb a:hover { color: var(--fg); } -.detail h1 { margin: 4px 0 12px; font-size: 18px; line-height: 28px; font-weight: 600; } -.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } -.chips span { font: 500 12px/16px var(--mono); padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); } +.detail h1 { margin: 4px 0 4px; font-size: 18px; line-height: 28px; font-weight: 600; } +.names { margin: 0 0 32px; font: 500 12px/16px var(--mono); color: var(--muted); } -.stage { position: relative; height: 640px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--bg); } +.stage { position: relative; height: 640px; overflow: hidden; background: var(--bg); } .stage iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); } .stage .state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; color: var(--muted); background: var(--bg); } .stage .state[hidden] { display: none; } -.stage .actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; opacity: 0; transition: opacity 150ms ease-out; } +.stage .actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity 150ms ease-out; } .stage:hover .actions, .stage:focus-within .actions { opacity: 1; } -.stage .actions .tool { background: var(--bg); border: 1px solid var(--line); } -.stage.full { position: fixed; inset: 0; z-index: 40; height: auto; border-radius: 0; border: 0; } +.stage .actions .tool { background: var(--bg); } +.stage.full { position: fixed; inset: 0; z-index: 40; height: auto; } .spin { width: 16px; height: 16px; border: 1.5px solid var(--line); border-top-color: var(--muted); border-radius: 50%; animation: spin 800ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .stage-skip { position: absolute; left: -9999px; } .stage-skip:focus { position: static; display: inline-block; margin-bottom: 8px; font-size: 14px; color: var(--accent); } -.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; } -.pager a { display: flex; flex-direction: column; gap: 4px; max-width: 48%; padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 20px; } -.pager a:hover { background: var(--hover); } +.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); } +.pager a { display: flex; flex-direction: column; gap: 4px; max-width: 48%; font-size: 14px; line-height: 20px; } +.pager a:hover { color: var(--accent); } .pager a.next { text-align: right; margin-left: auto; } .pager .label { display: flex; align-items: center; gap: 4px; } .pager a.next .label { justify-content: flex-end; } @@ -120,10 +136,10 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0; .index { padding: 48px; max-width: 1136px; } .index h1 { margin: 0 0 8px; font-size: 18px; line-height: 28px; font-weight: 600; } .index p { margin: 0 0 48px; color: var(--muted); max-width: 640px; } -.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 24px; } -.grid a { display: flex; gap: 12px; align-items: baseline; padding: 12px; border-radius: 12px; } -.grid a:hover { background: var(--hover); } -.grid .n { font: 500 12px/16px var(--mono); color: var(--muted); width: 20px; } +.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 24px; border-top: 1px solid var(--line); } +.grid a { display: flex; gap: 12px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); } +.grid a:hover strong { color: var(--accent); } +.grid .n { font: 500 12px/16px var(--mono); color: var(--muted); width: 24px; } .grid strong { font-weight: 500; display: block; } .grid small { font-size: 14px; line-height: 20px; color: var(--muted); } @@ -138,28 +154,43 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0; .palette .none { padding: 16px; color: var(--muted); font-size: 14px; } /* Home */ -.hero { height: 220vh; } -.pin { position: sticky; top: 56px; height: calc(100vh - 56px); display: grid; align-content: center; padding: 48px; overflow: hidden; } -.hero canvas { position: absolute; top: 0; right: 0; width: 62%; height: 100%; } -.hero .words { position: relative; max-width: 440px; } +.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 48px; min-height: calc(100vh - 56px); padding: 48px; } +.hero-iso { height: min(720px, calc(100vh - 152px)); } +.words { max-width: 440px; } +.glyphs { display: flex; gap: 8px; margin-bottom: 32px; } .hero h1 { margin: 0 0 16px; font-size: 18px; line-height: 28px; font-weight: 400; } .hero h1 strong { display: block; font-weight: 600; } -.hero p { margin: 0 0 24px; color: var(--muted); } +.hero p { margin: 0 0 32px; color: var(--muted); } .cta { display: flex; gap: 12px; flex-wrap: wrap; } -.button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 500; border: 1px solid var(--line); } -.button:hover { background: var(--hover); } -.button.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); } -.button.primary:hover { opacity: 0.88; } -.band { padding: 96px 48px; border-top: 1px solid var(--line); } -.band .label { margin-bottom: 12px; } -.band h2 { margin: 0 0 48px; font-size: 18px; line-height: 28px; font-weight: 600; max-width: 560px; } -.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 48px; } +.button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 500; } +.button:hover { color: var(--accent); } +.button.primary { background: var(--fg); color: var(--bg); } +.button.primary:hover { color: var(--bg); opacity: 0.88; } + +.show { padding: 96px 48px 48px; border-top: 1px solid var(--line); } +.show .mark { display: grid; grid-template-columns: 16px 32px auto; align-items: center; column-gap: 16px; row-gap: 8px; margin-bottom: 48px; } +.show .mark .n { font: 500 12px/16px var(--mono); color: var(--muted); } +.show .mark h2 { margin: 0; font-size: 18px; line-height: 28px; font-weight: 600; } +.show .mark p { grid-column: 3; margin: 0; max-width: 560px; color: var(--muted); } +.pair { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; margin-bottom: 48px; } +.show .mark { margin-bottom: 0; } +.pair .iso-host { height: 400px; } +.show .stage { height: 640px; } + +.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; padding: 96px 48px; border-top: 1px solid var(--line); } .facts strong { display: block; font: 500 18px/28px var(--mono); } .facts span { color: var(--muted); font-size: 14px; line-height: 20px; } -.home-stage { max-width: 1136px; } + .foot { padding: 24px 48px; border-top: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 24px; } .foot a { text-decoration: underline; text-underline-offset: 2px; } +@media (max-width: 1023px) { + .hero, .pair { grid-template-columns: 1fr; } + .hero-iso { height: 60vh; } + .pair .iso-host { height: 320px; } + .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } +} + @media (max-width: 767px) { .bar { padding: 0 16px; gap: 12px; } .bar nav .link { padding: 4px 8px; } @@ -167,10 +198,8 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0; .docs { grid-template-columns: 1fr; } .side { position: static; height: auto; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--line); } .detail, .index { padding: 24px 16px 64px; } - .stage { height: 480px; } - .pin, .band { padding: 48px 16px; } - .pin { align-content: end; } - .hero canvas { width: 100%; height: 55%; } + .stage, .show .stage { height: 480px; } + .hero, .show, .facts { padding: 48px 16px; } .foot { padding: 24px 16px; } }