@maniclang/workbench 0.1.11

package/examples/quiz-geometry.manic

@@ -0,0 +1,108 @@
+// ============================================================================
+//  quiz-geometry.manic  —  a QUIZ SHORT, hand-authored (creator-template proto)
+// ----------------------------------------------------------------------------
+//  The first proof of the "quiz Short" format the `creator` kit will later
+//  automate (see CAPABILITIES → Creator format templates). Built ENTIRELY from
+//  shipped primitives on a 9:16 canvas: a typewriter question, an ANIMATED
+//  geometry figure (the geo kit constructs the Euler line — which IS the answer),
+//  four option cards, a countdown, a time-out reveal, and a socials footer.
+//  When the `quiz`/`countdown`/`socials` builtins land, this whole file collapses
+//  to a few lines — but the beat/layout are proven here first.
+// ============================================================================
+
+title("Quiz — the Euler Line");
+canvas("9:16");                       // portrait 1080×1920 · cx=540 cy=960
+template("paper");
+
+// ---- the question (two typewriter lines, top / title-safe) ----
+text(q1, (cx, 210), "3 triangle centres are always"); color(q1, fg);   size(q1, 44); bold(q1); untraced(q1);
+text(q2, (cx, 285), "collinear — on WHICH line?");     color(q2, cyan); size(q2, 44); bold(q2); untraced(q2);
+
+// ---- the animated geometry figure (geo kit) : the Euler line construction ----
+// (colours are palette-semantic — fg/cyan/magenta/lime/dim — so they REMAP with
+//  the template; gold/red/etc. are fixed and would lose contrast on `paper`)
+point(A, (335, 760), "A"); point(B, (745, 745), "B"); point(C, (540, 470), "C");
+hidden(A); hidden(B); hidden(C);
+segment(ab, A, B); segment(bc, B, C); segment(ca, C, A); untraced(ab); untraced(bc); untraced(ca);
+circumcircle(cc, A, B, C); color(cc, dim); untraced(cc);
+circumcenter(O, A, B, C); color(O, magenta); label(O, "O", (20, -12)); hidden(O);
+centroid(G, A, B, C);     color(G, lime);    label(G, "G", (20, -12)); hidden(G);
+orthocenter(H, A, B, C);  color(H, cyan);    label(H, "H", (-34, -12)); hidden(H);
+segment(euler, O, H); color(euler, fg); stroke(euler, 7); glow(euler, 1.5); untraced(euler);
+
+// ---- four option cards, laid out 2×2 (compact — clears the figure) ----
+rect(c1, (305, 1010), 428, 120); color(c1, panel); filled(c1); hidden(c1);
+rect(c2, (775, 1010), 428, 120); color(c2, panel); filled(c2); hidden(c2);
+rect(c3, (305, 1150), 428, 120); color(c3, panel); filled(c3); hidden(c3);
+rect(c4, (775, 1150), 428, 120); color(c4, panel); filled(c4); hidden(c4);
+text(t1, (305, 1010), "A  Euler line");     color(t1, fg); size(t1, 34); hidden(t1);
+text(t2, (775, 1010), "B  Perp. bisector"); color(t2, fg); size(t2, 34); hidden(t2);
+text(t3, (305, 1150), "C  Angle bisector"); color(t3, fg); size(t3, 34); hidden(t3);
+text(t4, (775, 1150), "D  Median");         color(t4, fg); size(t4, 34); hidden(t4);
+
+// ---- countdown ring + digit (palette-semantic → template-safe) ----
+circle(ring, (cx, 1400), 62); color(ring, cyan); stroke(ring, 6); outlined(ring); hidden(ring);
+text(timer, (cx, 1400), "5"); color(timer, fg); size(timer, 62); bold(timer); hidden(timer);
+
+// ---- socials footer : icons DRAWN from primitives (manic has no raster images),
+//      so they render on any template; grouped as `foot` to show together ----
+line(rule, (150, 1740), (930, 1740)); color(rule, dim); stroke(rule, 2);
+// ▶ YouTube chip
+rect(yt,  (312, 1815), 58, 40); color(yt, magenta); filled(yt);
+polygon(ytp, (300, 1802), (300, 1828), (326, 1815), bg);
+// ✕ X chip
+rect(xb,  (404, 1815), 46, 46); color(xb, fg); outlined(xb);
+line(x1, (392, 1803), (416, 1827)); color(x1, fg); stroke(x1, 4);
+line(x2, (416, 1803), (392, 1827)); color(x2, fg); stroke(x2, 4);
+// ◎ Instagram chip
+rect(ig,  (496, 1815), 46, 46); color(ig, fg); outlined(ig);
+circle(igc, (496, 1815), 13); color(igc, fg); outlined(igc);
+circle(igd, (509, 1802), 3);  color(igd, fg); filled(igd);
+// handle + link
+text(foot, (740, 1815), "@manic · 8gwifi.org/manic"); color(foot, dim); size(foot, 28);
+tag(rule, footer); tag(yt, footer); tag(ytp, footer); tag(xb, footer); tag(x1, footer);
+tag(x2, footer); tag(ig, footer); tag(igc, footer); tag(igd, footer); tag(foot, footer);
+hidden(footer);
+
+// ================= THE BEAT =================
+// 1) ask — typewriter
+type(q1, 1.1);
+type(q2, 1.0);
+wait(0.2);
+
+// 2) the figure constructs itself (animated geometry — the geo kit)
+par { show(A, 0.25); show(B, 0.25); show(C, 0.25); }
+par { draw(ab, 0.5); draw(bc, 0.5); draw(ca, 0.5); }
+draw(cc, 0.6);
+par { show(O); show(G); show(H); }
+draw(euler, 0.9); pulse(euler);      // the three centres line up → the Euler line
+wait(0.3);
+
+// 3) options fly in, staggered
+seq {
+  par { show(c1, 0.2); show(t1, 0.2); }
+  par { show(c2, 0.2); show(t2, 0.2); }
+  par { show(c3, 0.2); show(t3, 0.2); }
+  par { show(c4, 0.2); show(t4, 0.2); }
+}
+show(footer, 0.3);
+
+// 4) countdown 5 → 1
+par { show(ring, 0.2); show(timer, 0.2); }
+wait(0.8); say(timer, "4", 0.15);
+wait(0.8); say(timer, "3", 0.15);
+wait(0.8); say(timer, "2", 0.15);
+wait(0.8); say(timer, "1", 0.15);
+wait(0.8);
+
+// 5) TIME OUT → reveal: card A (the Euler line) glows, the rest dim
+say(timer, "0", 0.15); flash(ring, gold);
+par {
+  recolor(c1, lime); flash(c1, gold); pulse(c1);
+  recolor(t1, void);
+  fade(c2, 0.5); fade(t2, 0.5);
+  fade(c3, 0.5); fade(t3, 0.5);
+  fade(c4, 0.5); fade(t4, 0.5);
+  flash(euler, gold);
+}
+wait(1.6);

package/examples/quiz-skins.manic

@@ -0,0 +1,22 @@
+// A creator quiz Short (9:16). Try the four card SKINS by changing the style
+// string on `quiz(...)`:  "badge" (default) · "minimal" · "glass" · "plain".
+// You can also add a question REVEAL in the same string, order-free, e.g.
+//   quiz(q, "...", "glass fade")   // glass cards + fade-in question
+canvas("9:16");
+template("shorts");
+
+// a reusable creator profile (set once, drawn by `socials`)
+creator(me, "@anish2good yt=zarigatongy x=@anish2good web=8gwifi.org/manic accent=magenta");
+
+// the quiz: a question + four answers, one marked `correct`
+quiz(q, "What is 7 x 8?", "badge");
+option(q, "54");
+option(q, "56", correct);
+option(q, "48");
+option(q, "63");
+
+// play the whole ask -> countdown -> reveal beat over 8 seconds
+run(q, 8);
+
+// the footer with the creator's socials
+socials(me);

package/examples/raft-cm.manic

@@ -0,0 +1,24 @@
+// ============================================================================
+//  raft-cm.manic  —  centre of mass, on the physics baseline (Layer 1)
+// ----------------------------------------------------------------------------
+//  `raft(id, [center], [personmass], [raftmass], [unit])` — a person walking on
+//  a floating raft. With no external horizontal force, momentum is conserved and
+//  the centre of mass stays FIXED: the raft slides the opposite way by
+//  −m_person/(m_person+m_raft) of each step. PRE-SIMULATED; `run(id,[dur])`
+//  replays it. The dashed line marks the (unmoving) centre of mass.
+//
+//  TO ADAPT: make the raft much lighter (raftmass) — it slides much further.
+// ============================================================================
+
+title("Raft — walk one way, the raft slides the other");
+canvas("16:9");
+
+text(hdr, (cx, 46), "Momentum stays zero, so the centre of mass never moves");
+size(hdr, 23); color(hdr, cyan); bold(hdr); display(hdr);
+
+raft(rf, (cx, 380), 70, 200);
+
+text(cap, (cx, h - 32), "the person walks; the raft glides back — the dashed centre-of-mass line stays put");
+size(cap, 16); color(cap, dim); display(cap);
+
+run(rf, 9);

package/examples/ramp.manic

@@ -0,0 +1,25 @@
+// ============================================================================
+//  ramp.manic  —  friction on an incline, on the physics baseline (Layer 1)
+// ----------------------------------------------------------------------------
+//  `ramp(id, [center], [angle], [mass], [applied], [unit])` — a block sliding
+//  down an inclined plane. Full force model: gravity along the slope, the normal
+//  force, and a static→kinetic friction switch. Friction turns mechanical energy
+//  into heat, so `energygraph`'s total DECAYS as the block slides. PRE-SIMULATED
+//  with RK4; `run(id,[dur])` replays it.
+//
+//  TO ADAPT: lower the angle below the friction angle and the block won't budge.
+// ============================================================================
+
+title("Inclined plane — friction dissipates energy");
+canvas("16:9");
+
+text(hdr, (cx, 44), "Block on a ramp — μ friction bleeds the energy away");
+size(hdr, 24); color(hdr, cyan); bold(hdr); display(hdr);
+
+ramp(rp, (300, 470), 30);
+energygraph(rp, (960, 320), 120);
+
+text(cap, (cx, h - 32), "as the block slides down, the gold total energy line falls — friction converts it to heat");
+size(cap, 16); color(cap, dim); display(cap);
+
+run(rp, 6);

package/examples/ray-fan.manic

@@ -0,0 +1,27 @@
+// ============================================================================
+//  ray-fan.manic  —  the signature of an aberration (real optics analysis)
+// ----------------------------------------------------------------------------
+//  A ray-fan plot: for each ray, how far off focus does it land (y) against
+//  where it entered the lens (x, edge → edge)? `rayfan` traces the real
+//  spherical surfaces. A perfect lens is a flat line at zero; the singlet's
+//  cubic S-CURVE is textbook spherical aberration — the outer rays bend too
+//  much. (The doublet/triplet flatten it, drawn to the same scale.)
+// ============================================================================
+
+title("Ray-Fan — Reading an Aberration");
+canvas("16:9");
+
+rayfan(rf, (640, 340), "singlet");
+
+text(cap, (cx, h - 46), ""); color(cap, fg); size(cap, 24); bold(cap); display(cap); sticky(cap);
+
+// ================= THE SCENE =================
+say(cap, "each ray: how far off focus (y) vs where it entered (x)…", 0.5);
+draw(rf.curve, 2.2);
+wait(0.5);
+
+say(cap, "a flat line would be a perfect lens — this ISN'T flat", 0.3);
+wait(2.0);
+
+say(cap, "that S-curve is spherical aberration: the edges bend too much", 0.3);
+wait(1.4);

package/examples/raymarch-alpha.manic

@@ -0,0 +1,39 @@
+// raymarch-alpha — Shader backbone step 7: OUTPUT ALPHA. A raymarched object with
+// `let alpha` renders on a TRANSPARENT background, so it composites over the rest of
+// the scene instead of drawing an opaque backdrop. Here a coloured metaball floats
+// over a full-canvas 2-D `shader` gradient — you can see the gradient THROUGH the
+// object's missed rays (and faintly through the object itself at alpha 0.9). Alpha
+// is faithful on both backends: GLSL writes `vec4(rgb, alpha)` and blends; the CPU
+// field stores per-texel alpha and composites the same way.
+//
+//   manic examples/raymarch-alpha.manic
+title("Raymarch with alpha — compositing over the scene");
+canvas("16:9");
+template("black");
+
+// a colourful 2-D shader gradient BEHIND the object (fills the canvas, opaque)
+shader(back) {
+  let hue = mod(u * 160.0 + v * 90.0 + 20.0, 360.0);
+  let sat = 0.7;
+  let val = 0.42 + 0.12 * sin(u * 6.28);
+}
+
+camera3((2.6, -3.2, 2.0), (0, 0, 0), 40, perspective);
+
+raymarch(blob) {
+  // two spheres smooth-unioned into a metaball
+  let a = sdsphere(x - 0.55 * sin(t), y, z + 0.4 * cos(t), 0.52);
+  let b = sdsphere(x + 0.55 * cos(t * 0.8), y - 0.25, z, 0.44);
+  let d = smin(a, b, 0.4);
+  // iridescent hit colour
+  let hue = mod(205.0 + nx * 85.0 + t * 34.0, 360.0);
+  let sat = 0.82;
+  let val = 0.55 + 0.3 * nz;
+  // OUTPUT ALPHA: hit ⇒ 0.9 (slightly translucent), miss ⇒ transparent (composites)
+  let alpha = 0.9;
+}
+
+caption(head, "raymarch ← alpha (composited)", (640, 66), 32);
+hidden(head);
+show(head);
+orbit3(60, 0, 5.0, 18, smooth);

package/examples/raymarch-boxgrid.manic

@@ -0,0 +1,47 @@
+// raymarch-boxgrid — Shader V2.3, the finale: the raymarched Shadertoy that
+// started this whole thread (tssSDN — a grid of boxes rippling around a bouncing
+// sphere), rebuilt as a TRUE ray-march this time (V2 tier), not the cloud3
+// reimagining (examples/cloud3-ripple.manic). One signed-distance field does it:
+// `rep(x,r)` tiles a box into an infinite grid (`sdbox3`), each cell's HEIGHT a
+// wave of its `rand2` hash + a falloff from the moving sphere's position; `smin`
+// unions in the sphere. Per-pixel loop in the ENGINE, no vec types — just a
+// scalar distance formula. Coloured red→gold by height, orbited by `camera3`.
+//
+//   manic examples/raymarch-boxgrid.manic
+title("A ray-marched box grid — the Shadertoy, rebuilt");
+canvas("16:9");
+template("black");
+
+camera3((2.6, -3.2, 2.2), (0, 0, 0.25), 40, perspective);
+
+raymarch(grid) {
+  let rp = 0.42;                          // cell size
+  let idx = floor(x / rp);                // which cell (x)
+  let idy = floor(y / rp);                // which cell (y)
+  let lx = rep(x, rp);                    // local coord inside the cell
+  let ly = rep(y, rp);
+  let sx = sin(t * 1.8) * 1.3;            // the bouncing sphere (inlined)
+  let sy = cos(t * 2.2) * 1.3;
+  let cxx = idx * rp + rp * 0.5;          // this cell's centre
+  let cyy = idy * rp + rp * 0.5;
+  let bs = hypot(cxx - sx, cyy - sy);     // cell → sphere distance
+  let fall = 1 - smoothstep(0.0, 2.2, bs);        // near the sphere ⇒ taller
+  let hsh = rand2(idx, idy);              // per-cell phase
+  let bh = 0.34 + 0.30 * sin(hsh * 6.283 + t * 2.6 + bs * 1.7) * fall; // box height (>0)
+  let box = sdbox3(lx, ly, z - bh * 0.5, rp * 0.4, rp * 0.4, bh * 0.5);
+  let ball = sdsphere(x - sx, y - sy, z - 0.6, 0.18);
+  let d = smin(box, ball, 0.04);          // grid ∪ sphere
+  // colour: red troughs → gold crests, top faces brighter
+  let hue = mod(6.0 + bh * 42.0, 360.0);
+  let sat = 0.85;
+  let val = 0.28 + 0.55 * nz;
+}
+
+caption(head, "A ray-marched box grid", (640, 66), 34);
+caption(sub, "sdbox3 + rep() tiling + smin — the Shadertoy, in manic", (640, 122), 22);
+hidden(head);
+hidden(sub);
+show(head);
+wait(1.5);
+show(sub);
+orbit3(50, 0, 4.6, 22, smooth);

package/examples/raymarch-docker-latency.manic

@@ -0,0 +1,74 @@
+// raymarch-docker-latency — "Visualizing Docker daemon socket latency as a raymarched
+// fluid surface." A per-pixel ray-marched LIQUID MESH: a grid of columns whose heights
+// ARE a latency trace. The daemon socket sits at the origin and emits high-frequency
+// concentric pings (amplitude modulated by a jittery round-trip-time signal); three
+// containers fire expanding ring events at baked timestamps, each ring's reach ∝ its
+// measured RTT. Every cell samples that field at its centre → the mesh shimmers with
+// socket traffic. One scalar SDF (`sdbox3` + `rep()` tiling), marched by the engine.
+//
+// Honest note: manic is PURE IN t (that's what lets it scrub + record), so it does NOT
+// tail a live /var/run/docker.sock in real time. The trace is BAKED IN — timestamps and
+// RTTs as constants — so the same second always renders the same wavefront. Swap the
+// constants for a captured `docker events` / socket-latency log and the mesh replays it
+// deterministically: data → SDF displacement → raymarch, exactly as described. The data
+// source is a recording, not a socket; the mechanism is real.
+//
+//   manic examples/raymarch-docker-latency.manic
+title("Docker daemon socket latency — a raymarched liquid mesh");
+canvas("16:9");
+template("black");
+
+camera3((2.4, -3.3, 2.0), (0, 0, 0.2), 40, perspective);
+
+raymarch(fluid) {
+  let rp = 0.34;                               // mesh cell size
+  let idx = floor(x / rp);   let idy = floor(y / rp);
+  let lx = rep(x, rp);       let ly = rep(y, rp);
+  let cx = idx*rp + rp*0.5;  let cy = idy*rp + rp*0.5;   // this cell's centre
+  let r0 = hypot(cx, cy);                       // distance from the daemon socket (origin)
+
+  // baked latency signal: socket round-trip time, jittery + bursty
+  let lat = 0.5 + 0.28*sin(t*5.3) + 0.16*sin(t*11.7 + 1.3) + 0.10*sin(t*23.1 + 0.7);
+
+  // the daemon socket: high-frequency concentric pings, amplitude ∝ latency
+  let pings = lat * sin(6.0*r0 - t*7.0) / (1.0 + 1.3*r0);
+
+  // three containers talking to the daemon: baked (epicenter, fire time, RTT) rings
+  let d1 = hypot(cx + 1.3, cy - 0.8);   let a1 = t - 1.4;   let f1 = a1*1.9;
+  let e1 = step(0.0, a1) * exp(-0.7*a1)  * sin(7.0*(d1 - f1)) * exp(-3.0*(d1-f1)*(d1-f1));
+  let d2 = hypot(cx - 1.6, cy - 1.1);   let a2 = t - 3.2;   let f2 = a2*2.1;
+  let e2 = step(0.0, a2) * exp(-0.6*a2)  * sin(7.0*(d2 - f2)) * exp(-3.0*(d2-f2)*(d2-f2));
+  let d3 = hypot(cx + 0.4, cy + 1.7);   let a3 = t - 5.0;   let f3 = a3*2.0;
+  let e3 = step(0.0, a3) * exp(-0.55*a3) * sin(7.0*(d3 - f3)) * exp(-3.0*(d3-f3)*(d3-f3));
+
+  // column height = calm water level + the summed latency displacement (always > 0)
+  let bh = clamp(0.22 + 0.13*pings + 0.17*(e1 + e2 + e3), 0.03, 0.78);
+  let box = sdbox3(lx, ly, z - bh*0.5, rp*0.42, rp*0.42, bh*0.5);
+  let d = box;
+
+  // hit colour: deep-blue troughs → bright cyan crests (from the actual hit height),
+  // top faces brightest — no cross-stage lets, so the field colours cleanly
+  let crest = clamp(hz * 1.7, 0.0, 1.0);
+  let hue = mod(210.0 - crest*56.0, 360.0);
+  let sat = 0.82;
+  let val = 0.16 + 0.55*crest + 0.30*nz;
+}
+
+// ---- annotations ----
+caption(head, "Docker daemon socket latency", (640, 60), 33);
+caption(sub, "each socket ping ripples a raymarched liquid mesh", (640, 112), 21);
+hidden(head);
+hidden(sub);
+equation(eq, (640, 636), `z_{\text{cell}} = \mathrm{water} + \sum_i \mathrm{RTT}_i\,\mathrm{ring}(r_i - c\,\Delta t_i)`, 26);
+caption(note, "baked latency trace → SDF displacement → raymarch · pure in t, so it scrubs", (640, 690), 18);
+hidden(eq);
+hidden(note);
+
+show(head);
+wait(1.6);
+show(sub);
+wait(2.2);
+show(eq);
+show(note);
+// slow orbit so the mesh reads as genuine 3-D geometry
+orbit3(52, 8, 4.8, 22, smooth);

package/examples/raymarch-metaballs.manic

@@ -0,0 +1,37 @@
+// raymarch-metaballs — Shader V2: a 3-D scene RAY-MARCHED per pixel. You write
+// only the signed-distance field `let d` (the distance from any point x,y,z to
+// the scene); the engine marches a ray per pixel until it hits the surface,
+// takes the normal by finite differences, and shades it. No per-pixel loop in
+// the DSL (it runs in the engine, like `voronoi`/`mandelbrot`) and NO vec/mat
+// types — the SDF is a scalar formula, component math the manic way. Here three
+// spheres orbit and MERGE through `smin` (smooth union) into living metaballs.
+//
+//   manic examples/raymarch-metaballs.manic
+title("Metaballs — a ray-marched 3D field");
+canvas("16:9");
+template("black");
+
+raymarch(blobs) {
+  // three moving spheres (signed distance = distance to centre − radius)
+  let a = sdsphere(x - 0.75*sin(t),        y - 0.5*cos(t*1.3),  z + 0.3*sin(t*0.7), 0.52);
+  let b = sdsphere(x + 0.6*cos(t*0.9),     y + 0.45*sin(t*1.1), z - 0.35*cos(t),    0.46);
+  let c = sdsphere(x + 0.2*sin(t*1.7),     y + 0.6*sin(t*0.7),  z + 0.25*sin(t*1.4), 0.4);
+  // smooth-union them (smin) so they gloop together instead of just overlapping
+  let ab = smin(a, b, 0.55);
+  let d  = smin(ab, c, 0.55);
+}
+
+// ---- textbook annotations ----
+caption(head, "Metaballs — one distance field", (640, 66), 34);
+caption(sub, "raymarch: you write the SDF, the engine marches it", (640, 122), 22);
+hidden(head);
+hidden(sub);
+equation(eq, (640, 648), `d = \operatorname{smin}(d_1, d_2, k)`, 34);
+hidden(eq);
+
+show(head);
+wait(1.6);
+show(sub);
+wait(2.6);
+show(eq);
+wait(22);

package/examples/raymarch-sculpture.manic

@@ -0,0 +1,39 @@
+// raymarch-sculpture — Shader V2.2: a coloured, carved SDF sculpture that a real
+// `camera3` orbits. New since V2.1: (1) your own HIT colour — `let hue`/`sat`/`val`
+// (or r/g/b) as a formula of the surface normal `nx`/`ny`/`nz`, hit height `hz`
+// and time `t`; (2) `camera3` reuse — the marcher builds its rays from the scene
+// camera, so `orbit3` sweeps around the scene; (3) SDF booleans `smin` (smooth
+// union), `sdsub` (carve), `sdint` (intersect). Still just a scalar distance
+// field — no per-pixel loop in the DSL, no vec types.
+//
+//   manic examples/raymarch-sculpture.manic
+title("A carved, coloured SDF — orbited by camera3");
+canvas("16:9");
+template("black");
+
+camera3((3.4, -3.8, 2.2), (0, 0, 0.15), 38, perspective);
+
+raymarch(gem) {
+  // a core sphere with two bumps smoothly fused on (metaball style)
+  let core = sdsphere(x, y, z, 1.0);
+  let b1 = sdsphere(x - 0.9*sin(t*0.8), y, z + 0.9*cos(t*0.8), 0.44);
+  let b2 = sdsphere(x + 0.5*cos(t), y - 0.85*sin(t*1.1), z, 0.4);
+  let blob = smin(smin(core, b1, 0.45), b2, 0.45);
+  // carve a spherical bite out of it
+  let bite = sdsphere(x - 0.55, y - 0.9, z + 0.55, 0.62);
+  let d = sdsub(bite, blob);
+  // iridescent colour: hue from the facing direction + a slow time sweep
+  let hue = mod(205.0 + nx*95.0 + ny*55.0 + t*40.0, 360.0);
+  let sat = 0.82;
+  let val = 0.52 + 0.28*nz;
+}
+
+caption(head, "A carved, coloured SDF", (640, 66), 34);
+caption(sub, "hit colour from the normal + camera3 orbit", (640, 122), 22);
+hidden(head);
+hidden(sub);
+show(head);
+wait(1.4);
+show(sub);
+// slow camera orbit — the marcher re-reads camera3 every frame (captions stay up)
+orbit3(70, 0, 5.4, 24, smooth);

package/examples/raymarch-shapes3.manic

@@ -0,0 +1,31 @@
+// raymarch-shapes3 — the 3-D shape/SDF builtins (Layer 1, batch 2) in a real
+// ray-march: a torus, an octahedron, and a capsule spindle, smooth-unioned and
+// orbited by camera3. Each is ONE scalar builtin — no vec math, no hand-written
+// distance functions. Full-res GLSL with the CPU marcher as the exact fallback.
+//
+//   manic examples/raymarch-shapes3.manic
+title("Ray-marched SDF primitives — torus · octahedron · capsule");
+canvas("16:9");
+template("black");
+
+camera3((3.2, -3.6, 2.4), (0, 0, 0), 40, perspective);
+
+raymarch(scene) {
+  let tor = sdtorus(x, y, z, 0.95, 0.26);       // ring in the XY plane
+  let oct = sdoctahedron(x, y, z - 1.05, 0.5);   // floating above
+  let spn = sdcapsule(x, y, z, 1.5, 0.10);       // vertical spindle through it
+  let d = smin(smin(tor, oct, 0.18), spn, 0.12);
+  // iridescent hit colour from the normal + a slow time sweep
+  let hue = mod(190.0 + nz * 70.0 + nx * 40.0 + t * 30.0, 360.0);
+  let sat = 0.82;
+  let val = 0.52 + 0.32 * nz;
+}
+
+caption(head, "sdtorus · sdoctahedron · sdcapsule", (640, 66), 30);
+caption(sub, "each shape one scalar builtin — no vec math", (640, 118), 20);
+hidden(head);
+hidden(sub);
+show(head);
+wait(1.4);
+show(sub);
+orbit3(70, 0, 5.4, 20, smooth);

package/examples/reactive-integral.manic

@@ -0,0 +1,172 @@
+// ============================================================================
+// reactive-integral.manic — one calculation, one continuous visual world
+// ----------------------------------------------------------------------------
+// Integration by parts uses one structured equation. `rewrite` keeps unchanged
+// RaTeX parts alive while only the mathematical difference moves or enters.
+// The graph then verifies the result: the slope of F is the height of f, and
+// +C becomes a visible family of vertical translations.
+// ============================================================================
+
+title("A Reactive Integral");
+canvas("16:9");
+template("plain");
+watermark(manicMark, (1135, 30), "Made With Manic");
+
+// Shared colour roles follow the same mathematical objects through every act.
+// x / u is magenta; cos, sin and their antiderivative relation are cyan.
+text(kicker, (285, 38), "ONE INTEGRAL · ONE CONTINUOUS STORY");
+size(kicker, 18); color(kicker, dim); bold(kicker); hidden(kicker);
+
+text(headline, (430, 72), "Watch only the mathematics that changes");
+size(headline, 28); color(headline, fg); bold(headline); hidden(headline);
+
+// ---------------------------------------------------------------------------
+// ONE PERSISTENT EQUATION
+// ---------------------------------------------------------------------------
+
+equation(
+  work,
+  (cx, 145),
+  `\int \textcolor{magenta}{x}\,\textcolor{cyan}{\cos(x)}\,dx`,
+  46
+);
+hidden(work);
+
+// The by-parts roles remain visible while the expression changes above them.
+equation(uChoice, (330, 225), `u=x`, 28); color(uChoice, magenta); hidden(uChoice);
+equation(dvChoice, (525, 225), `dv=\cos(x)\,dx`, 28); color(dvChoice, cyan); hidden(dvChoice);
+equation(duChoice, (760, 225), `du=dx`, 28); color(duChoice, magenta); hidden(duChoice);
+equation(vChoice, (950, 225), `v=\sin(x)`, 28); color(vChoice, cyan); hidden(vChoice);
+
+text(method, (cx, 278), "INTEGRATION BY PARTS");
+size(method, 16); color(method, dim); bold(method); hidden(method);
+
+// ---------------------------------------------------------------------------
+// ONE GRAPH, ASKED THREE CONNECTED QUESTIONS
+// ---------------------------------------------------------------------------
+
+let ox = cx;
+let oy = 515;
+let sx = 108;
+let sy = 28;
+
+axes(ax, (ox, oy), 550, 165, 1);
+color(ax, dim); opacity(ax, 0.50); untraced(ax);
+
+// Integrand and one representative antiderivative (C=0).
+plot(f, (ox, oy), sx, sy, "x*cos(x)", (-5, 5));
+color(f, cyan); stroke(f, 5); glow(f, 0.8); untraced(f);
+
+plot(bigF, (ox, oy), sx, sy, "x*sin(x)+cos(x)", (-5, 5));
+color(bigF, lime); stroke(bigF, 5); dashed(bigF, 18, 11);
+glow(bigF, 0.8); untraced(bigF);
+
+// Numerical derivative of F: drawing it lands directly on f.
+deriv(dF, bigF);
+color(dF, gold); stroke(dF, 3); glow(dF, 0.5); untraced(dF);
+
+// A moving tangent makes “F' = f” a local statement at every x.
+tangent(tan, bigF, -3.8, 180); color(tan, gold); hidden(tan);
+slope(slopeValue, bigF, -3.8, (18, -24)); color(slopeValue, gold); hidden(slopeValue);
+
+equation(fLabel, (250, 338), `f(x)=x\cos(x)`, 28); color(fLabel, cyan); hidden(fLabel);
+equation(FLabel, (1010, 338), `F(x)=x\sin(x)+\cos(x)`, 28); color(FLabel, lime); hidden(FLabel);
+equation(proofLabel, (cx, 280), `F'(x)=f(x)=x\cos(x)`, 34); color(proofLabel, gold); hidden(proofLabel);
+
+// +C does not change the derivative: it translates the same curve vertically.
+plot(Fup, (ox, oy), sx, sy, "x*sin(x)+cos(x)+1.5", (-5, 5));
+plot(Fdown, (ox, oy), sx, sy, "x*sin(x)+cos(x)-1.5", (-5, 5));
+color(Fup, magenta); color(Fdown, magenta);
+stroke(Fup, 3); stroke(Fdown, 3); opacity(Fup, 0.55); opacity(Fdown, 0.55);
+dashed(Fup, 14, 9); dashed(Fdown, 14, 9);
+untraced(Fup); untraced(Fdown);
+
+equation(familyLabel, (cx, 280), `F(x)+C\quad\text{changes height, not slope}`, 32);
+color(familyLabel, magenta); hidden(familyLabel);
+
+text(caption, (cx, 690), "");
+size(caption, 19); color(caption, dim); bold(caption);
+
+// Axes and curves are `untraced`, so their draw progress starts at zero without
+// also zeroing opacity. That lets `draw(...)` reveal their geometry later.
+
+// ---------------------------------------------------------------------------
+// TIMELINE
+// ---------------------------------------------------------------------------
+
+show(kicker, 0.45);
+show(headline, 0.55);
+say(caption, "Start with the question. Keep the stage — change only its state.");
+show(work, 0.65);
+wait(1.60);
+
+// Choose u and dv by reusing the same semantic colours.
+show(method, 0.35);
+say(caption, "Choose the two roles. Colour preserves their identity.");
+par { show(uChoice, 0.50); show(dvChoice, 0.65); }
+wait(1.20);
+par { show(duChoice, 0.50); show(vChoice, 0.50); }
+wait(1.50);
+
+// Build x sin(x) - integral sin(x) dx. Reusable glyphs travel to their new
+// jobs while the obsolete cosine is the only original factor that leaves.
+say(caption, "Apply integration by parts: persistent pieces move; new pieces arrive.");
+rewrite(
+  work,
+  `\textcolor{magenta}{x}\textcolor{cyan}{\sin(x)}-\int\textcolor{cyan}{\sin(x)}\,dx`,
+  1.05,
+  smooth
+);
+wait(2.00);
+
+// Only the remaining integral changes. x sin(x) stays untouched.
+say(caption, "Resolve the remaining integral. The stable product never blinks.");
+rewrite(
+  work,
+  `\textcolor{magenta}{x}\textcolor{cyan}{\sin(x)}+\textcolor{cyan}{\cos(x)}+\textcolor{gold}{C}`,
+  1.00,
+  smooth
+);
+wait(2.00);
+
+// Move attention from symbolic manipulation into the same idea as geometry.
+say(caption, "Now verify the answer visually — without leaving the scene.");
+par {
+  fade(method, 0.40);
+  fade(uChoice, 0.40); fade(dvChoice, 0.40);
+  fade(duChoice, 0.40); fade(vChoice, 0.40);
+  draw(ax, 0.85);
+}
+draw(f, 1.80);
+show(fLabel, 0.45);
+wait(1.00);
+
+draw(bigF, 1.80);
+show(FLabel, 0.45);
+wait(1.00);
+
+// The tangent and its numeric slope glide continuously across F.
+say(caption, "At every x, the slope of the green curve equals the blue height.");
+par { show(tan, 0.45); show(slopeValue, 0.45); }
+par {
+  to(tan, x, 3.8, 4.80, smooth);
+  to(slopeValue, x, 3.8, 4.80, smooth);
+}
+wait(0.60);
+
+// The derivative trace lands directly over the original integrand.
+show(proofLabel, 0.50);
+draw(dF, 2.20);
+flash(f, cyan);
+wait(1.40);
+
+// Finish with the geometric meaning of the integration constant.
+say(caption, "+C creates a family of answers — same shape, same slope.");
+par {
+  fade(tan, 0.45); fade(slopeValue, 0.45); fade(dF, 0.45);
+  fade(proofLabel, 0.45); fade(fLabel, 0.45); fade(FLabel, 0.45);
+  show(familyLabel, 0.55);
+  pulse(work, 0.70);
+}
+par { draw(Fup, 1.50); draw(Fdown, 1.50); }
+wait(2.80);