@maniclang/workbench 0.1.11

package/examples/systems-arrow-patterns.manic

@@ -0,0 +1,151 @@
+title("Systems Foundation — Arrow Patterns");
+canvas("16:9");
+template("mono");
+
+let u = (w+h-abs(w-h))/1440;
+let pw = w*0.27;
+let ph = h*0.25;
+let x1 = w*0.18;
+let x2 = w*0.50;
+let x3 = w*0.82;
+let y1 = h*0.34;
+let y2 = h*0.68;
+
+watermark(mark, (w*0.09, h*0.045), "Made With Manic");
+text(kicker, (cx, h*0.045), "SYSTEMS FOUNDATION · DIRECTION IS VISIBLE");
+text(headline, (cx, h*0.12), "One arrow grammar, many delivery stories");
+text(caption, (cx, h*0.925), "Arrows describe paths. seq, par, travel, and flow describe what moves through them.");
+size(kicker, 16*u); color(kicker, dim); bold(kicker);
+size(headline, 31*u); bold(headline); wrap(headline, w*0.86);
+size(caption, 18*u); color(caption, dim); wrap(caption, w*0.88);
+
+rect(p1, (x1,y1), pw,ph); outlined(p1); color(p1, dim); stroke(p1, 2*u);
+rect(p2, (x2,y1), pw,ph); outlined(p2); color(p2, dim); stroke(p2, 2*u);
+rect(p3, (x3,y1), pw,ph); outlined(p3); color(p3, dim); stroke(p3, 2*u);
+rect(p4, (x1,y2), pw,ph); outlined(p4); color(p4, dim); stroke(p4, 2*u);
+rect(p5, (x2,y2), pw,ph); outlined(p5); color(p5, dim); stroke(p5, 2*u);
+rect(p6, (x3,y2), pw,ph); outlined(p6); color(p6, dim); stroke(p6, 2*u);
+
+text(t1, (x1,y1-ph*0.36), "ONE WAY");
+text(t2, (x2,y1-ph*0.36), "ROUND TRIP");
+text(t3, (x3,y1-ph*0.36), "ORTHOGONAL");
+text(t4, (x1,y2-ph*0.36), "VERTICAL PORTS");
+text(t5, (x2,y2-ph*0.36), "FAN OUT");
+text(t6, (x3,y2-ph*0.36), "DIAGONAL DUPLEX");
+size(t1, 16*u); size(t2, 16*u); size(t3, 16*u);
+size(t4, 16*u); size(t5, 16*u); size(t6, 16*u);
+color(t1, dim); color(t2, dim); color(t3, dim);
+color(t4, dim); color(t5, dim); color(t6, dim);
+bold(t1); bold(t2); bold(t3); bold(t4); bold(t5); bold(t6);
+
+// 1 — one source, one destination.
+arrow(one, (x1-pw*0.34,y1+ph*0.08), (x1+pw*0.34,y1+ph*0.08));
+color(one, cyan); stroke(one, 4*u); untraced(one);
+circle(oneDot, (x1-pw*0.34,y1+ph*0.08), 8*u); color(oneDot, cyan); hidden(oneDot);
+
+// 2 — request and response remain separate, honest directions.
+arrow(outbound, (x2-pw*0.34,y1), (x2+pw*0.34,y1));
+arrow(inbound, (x2+pw*0.34,y1+ph*0.17), (x2-pw*0.34,y1+ph*0.17));
+color(outbound, cyan); color(inbound, magenta);
+stroke(outbound, 4*u); stroke(inbound, 4*u);
+untraced(outbound); untraced(inbound);
+circle(requestDot, (x2-pw*0.34,y1), 8*u); color(requestDot, cyan); hidden(requestDot);
+circle(responseDot, (x2+pw*0.34,y1+ph*0.17), 8*u); color(responseDot, magenta); hidden(responseDot);
+
+// 3 — generic geometry can draw a stepped path; Systems nodes use one
+// `connect(path, a, b, orthogonal)` declaration for the same routed identity.
+line(elbowA, (x3-pw*0.34,y1-ph*0.02), (x3,y1-ph*0.02));
+line(elbowB, (x3,y1-ph*0.02), (x3,y1+ph*0.20));
+arrow(elbowC, (x3,y1+ph*0.20), (x3+pw*0.34,y1+ph*0.20));
+color(elbowA, gold); color(elbowB, gold); color(elbowC, gold);
+stroke(elbowA, 4*u); stroke(elbowB, 4*u); stroke(elbowC, 4*u);
+untraced(elbowA); untraced(elbowB); untraced(elbowC);
+circle(elbowDot, (x3-pw*0.34,y1-ph*0.02), 8*u); color(elbowDot, gold); hidden(elbowDot);
+
+// 4 — ports can face vertically without changing motion semantics.
+arrow(downLane, (x1-pw*0.12,y2-ph*0.20), (x1-pw*0.12,y2+ph*0.25));
+arrow(upLane, (x1+pw*0.12,y2+ph*0.25), (x1+pw*0.12,y2-ph*0.20));
+color(downLane, cyan); color(upLane, magenta);
+stroke(downLane, 4*u); stroke(upLane, 4*u);
+untraced(downLane); untraced(upLane);
+circle(downDot, (x1-pw*0.12,y2-ph*0.20), 8*u); color(downDot, cyan); hidden(downDot);
+circle(upDot, (x1+pw*0.12,y2+ph*0.25), 8*u); color(upDot, magenta); hidden(upDot);
+
+// 5 — fan-out is three explicitly authored deliveries, not inferred broadcast.
+arrow(fanA, (x2-pw*0.34,y2+ph*0.04), (x2+pw*0.34,y2-ph*0.22));
+arrow(fanB, (x2-pw*0.34,y2+ph*0.04), (x2+pw*0.34,y2+ph*0.04));
+arrow(fanC, (x2-pw*0.34,y2+ph*0.04), (x2+pw*0.34,y2+ph*0.30));
+color(fanA, cyan); color(fanB, cyan); color(fanC, cyan);
+stroke(fanA, 3*u); stroke(fanB, 3*u); stroke(fanC, 3*u);
+untraced(fanA); untraced(fanB); untraced(fanC);
+circle(fanDotA, (x2-pw*0.34,y2+ph*0.04), 7*u); color(fanDotA, cyan); hidden(fanDotA);
+circle(fanDotB, (x2-pw*0.34,y2+ph*0.04), 7*u); color(fanDotB, cyan); hidden(fanDotB);
+circle(fanDotC, (x2-pw*0.34,y2+ph*0.04), 7*u); color(fanDotC, cyan); hidden(fanDotC);
+
+// 6 — diagonal request/return lanes use different styling and directions.
+arrow(diagOut, (x3-pw*0.32,y2+ph*0.24), (x3+pw*0.27,y2-ph*0.22));
+arrow(diagBack, (x3+pw*0.34,y2-ph*0.12), (x3-pw*0.25,y2+ph*0.34));
+color(diagOut, cyan); color(diagBack, magenta); dashed(diagBack);
+stroke(diagOut, 4*u); stroke(diagBack, 4*u);
+untraced(diagOut); untraced(diagBack);
+circle(diagRequest, (x3-pw*0.32,y2+ph*0.24), 8*u); color(diagRequest, cyan); hidden(diagRequest);
+circle(diagResponse, (x3+pw*0.34,y2-ph*0.12), 8*u); color(diagResponse, magenta); hidden(diagResponse);
+
+tag(p1, cards); tag(p2, cards); tag(p3, cards); tag(p4, cards); tag(p5, cards); tag(p6, cards);
+tag(t1, cards); tag(t2, cards); tag(t3, cards); tag(t4, cards); tag(t5, cards); tag(t6, cards);
+tag(one, paths); tag(outbound, paths); tag(inbound, paths);
+tag(elbowA, paths); tag(elbowB, paths); tag(elbowC, paths);
+tag(downLane, paths); tag(upLane, paths);
+tag(fanA, paths); tag(fanB, paths); tag(fanC, paths);
+tag(diagOut, paths); tag(diagBack, paths);
+
+hidden(kicker); hidden(headline); hidden(caption); hidden(cards);
+
+step("arrow-grammar") {
+  par {
+    show(kicker, 0.30);
+    show(headline, 0.45);
+    show(caption, 0.40);
+    show(cards, 0.45);
+    draw(paths, 1.10, smooth);
+  }
+}
+wait(0.35);
+
+step("traffic") {
+  par {
+    show(oneDot, 0.15); travel(oneDot, one, 1.20, linear); flow(one, 1.20);
+    seq {
+      show(requestDot, 0.15); travel(requestDot, outbound, 0.65, linear);
+      show(responseDot, 0.15); travel(responseDot, inbound, 0.65, linear);
+    }
+    seq {
+      show(elbowDot, 0.15);
+      travel(elbowDot, elbowA, 0.40, linear);
+      travel(elbowDot, elbowB, 0.35, linear);
+      travel(elbowDot, elbowC, 0.45, linear);
+    }
+    par {
+      show(downDot, 0.15); travel(downDot, downLane, 1.20, linear);
+      show(upDot, 0.15); travel(upDot, upLane, 1.20, linear);
+    }
+    par {
+      show(fanDotA, 0.15); travel(fanDotA, fanA, 1.20, linear);
+      show(fanDotB, 0.15); travel(fanDotB, fanB, 1.20, linear);
+      show(fanDotC, 0.15); travel(fanDotC, fanC, 1.20, linear);
+    }
+    par {
+      show(diagRequest, 0.15); travel(diagRequest, diagOut, 1.20, linear);
+      show(diagResponse, 0.15); travel(diagResponse, diagBack, 1.20, linear);
+    }
+  }
+}
+wait(0.55);
+
+step("creator-controls-semantics") {
+  par {
+    pulse(paths, 0.75);
+    say(caption, "The same paths can mean request, response, queue delivery, broadcast, or pure motion—the creator decides.", 0.40);
+  }
+}
+wait(1.20);

package/examples/systems-foundation.manic

@@ -0,0 +1,71 @@
+title("Systems Foundation — One Request, One Return");
+canvas("16:9");
+template("mono");
+
+watermark(mark, (160, 54), "Made With Manic");
+text(kicker, (cx, 54), "PROVIDER-NEUTRAL SYSTEMS");
+text(headline, (cx, 104), "Structure is not behaviour");
+text(caption, (cx, h-58), "Cold paths show what is possible. One persistent dot shows what actually happened.");
+size(kicker, 18); color(kicker, dim); bold(kicker);
+size(headline, 34); bold(headline);
+size(caption, 20); color(caption, dim); wrap(caption, w*0.86);
+
+architecture(platform, (cx, cy+15), w*0.88, h*0.58);
+node(user, platform, "client", "User");
+node(edge, platform, "gateway", "Gateway");
+node(api, platform, "service", "API Service");
+node(cache, platform, "cache", "Cache");
+node(db, platform, "database", "Database");
+
+connect(toEdge, user, edge);
+connect(toApi, edge, api);
+connect(toCache, api, cache);
+// One semantic connection: Manic chooses node-boundary ports and keeps the
+// packet continuous across every internal orthogonal segment.
+connect(toDb, cache, db, orthogonal, right, top);
+connect(dbReturn, db, api, 95);
+connect(apiReturn, api, edge, 75);
+connect(edgeReturn, edge, user, 55);
+
+message(packet, user, "GET");
+hidden(kicker); hidden(headline); hidden(caption);
+untraced(platform.connections);
+hidden(packet);
+
+step("structure") {
+  par {
+    show(kicker, 0.35);
+    show(headline, 0.45);
+    show(caption, 0.45);
+    draw(platform.connections, 1.20, smooth);
+  }
+}
+wait(0.45);
+
+step("continuous-round-trip") {
+  par {
+    show(packet, 0.20);
+    say(caption, "One dot moves continuously end to end. Every route hand-off preserves its identity.", 0.35);
+    seq {
+      route(packet, toEdge, 0.70, linear);
+      route(packet, toApi, 0.70, linear);
+      route(packet, toCache, 0.70, linear);
+      route(packet, toDb, 0.70, linear);
+      par {
+        recolor(packet, magenta, 0.30);
+        route(packet, dbReturn, 0.80, linear);
+      }
+      route(packet, apiReturn, 0.75, linear);
+      route(packet, edgeReturn, 0.75, linear);
+    }
+  }
+}
+wait(0.45);
+
+step("proof") {
+  par {
+    pulse(packet, 0.70);
+    say(caption, "The same dot is back at the User: one identity, seven connected journeys, zero animation gaps.", 0.40);
+  }
+}
+wait(1.10);

package/examples/systems-rabbitmq-consumers.manic

@@ -0,0 +1,118 @@
+title("RabbitMQ Consumers — One Message, One Worker");
+canvas("16:9");
+template("mono");
+
+let u = (w+h-abs(w-h))/1440;
+watermark(mark, (w*0.14, h*0.035), "Made With Manic");
+text(kicker, (cx, h*0.055), "SYSTEMS KIT · COMPETING CONSUMERS");
+text(headline, (cx, h*0.125), "One queue. Three workers. One owner per message.");
+text(caption, (cx, h*0.94), "Cold paths show every legal route; the moving job shows the route selected now.");
+size(kicker, 16*u); color(kicker, dim); bold(kicker);
+size(headline, 29*u); bold(headline); wrap(headline, w*0.88);
+size(caption, 18*u); color(caption, dim); wrap(caption, w*0.86);
+
+if h > 1.25*w {
+  architecture(runtime, (cx, h*0.52), w*0.84, h*0.70);
+}
+else {
+  architecture(runtime, (cx, h*0.52), w*0.90, h*0.68);
+}
+
+node(queue, runtime, "queue", "RabbitMQ Queue");
+
+cluster(consumers, runtime, "RABBITMQ CONSUMERS");
+node(worker1, consumers, "service", "Pod Worker 1");
+node(worker2, consumers, "service", "Pod Worker 2");
+node(worker3, consumers, "service", "Pod Worker 3");
+
+node(database, runtime, "database", "Database");
+
+// Every lane is structural possibility. Explicit ports keep the upper and
+// lower routes orthogonal without changing the semantic connection identity.
+connect(queueToWorker1, queue, worker1, orthogonal, right, left);
+connect(queueToWorker2, queue, worker2);
+connect(queueToWorker3, queue, worker3, orthogonal, right, left);
+connect(worker1ToDatabase, worker1, database, orthogonal, right, left);
+connect(worker2ToDatabase, worker2, database);
+connect(worker3ToDatabase, worker3, database, orthogonal, right, left);
+
+message(job101, queue, "101");
+message(job102, queue, "102");
+message(job103, queue, "103");
+
+hidden(kicker); hidden(headline); hidden(caption);
+hidden(runtime.nodes); hidden(consumers.parts);
+hidden(job101.parts); hidden(job102.parts); hidden(job103.parts);
+untraced(runtime.connections);
+
+step("queue-and-consumer-pool") {
+  par {
+    show(kicker, 0.30); show(headline, 0.45); show(caption, 0.40);
+    show(queue, 0.35);
+    show(consumers.parts, 0.45);
+    stagger(0.10) {
+      show(worker1, 0.32);
+      show(worker2, 0.32);
+      show(worker3, 0.32);
+    }
+    say(caption, "The queue and three workers are structure only. No delivery policy is inferred from their icons.", 0.40);
+  }
+}
+wait(0.25);
+
+step("shared-database") {
+  par {
+    show(database, 0.38);
+    draw(runtime.connections, 1.10, smooth);
+    say(caption, "Each worker can consume from RabbitMQ and write its result to the same database.", 0.40);
+  }
+}
+wait(0.35);
+
+step("message-101-selects-worker-2") {
+  par {
+    seq {
+      show(job101.parts, 0.18);
+      route(job101, queueToWorker2, 0.90, linear);
+      route(job101, worker2ToDatabase, 0.90, linear);
+    }
+    say(caption, "Message 101 is delivered to Worker 2 only. The upper and lower consumer routes stay cold.", 0.40);
+  }
+}
+wait(0.35);
+
+step("message-102-selects-worker-1") {
+  par {
+    fade(job101.parts, 0.20);
+    fade(queueToWorker2.hot, 0.25); fade(worker2ToDatabase.hot, 0.25);
+    seq {
+      show(job102.parts, 0.18);
+      route(job102, queueToWorker1, 1.05, linear);
+      route(job102, worker1ToDatabase, 1.05, linear);
+    }
+    say(caption, "The next message can select Worker 1. Orthogonal turns preserve the same moving identity.", 0.40);
+  }
+}
+wait(0.35);
+
+step("message-103-selects-worker-3") {
+  par {
+    fade(job102.parts, 0.20);
+    fade(queueToWorker1.hot, 0.25); fade(worker1ToDatabase.hot, 0.25);
+    seq {
+      show(job103.parts, 0.18);
+      route(job103, queueToWorker3, 1.05, linear);
+      route(job103, worker3ToDatabase, 1.05, linear);
+    }
+    say(caption, "Message 103 selects Worker 3: three jobs were shared, never broadcast as three copies.", 0.40);
+  }
+}
+wait(0.45);
+
+step("takeaway") {
+  par {
+    pulse(queue, 0.65); pulse(consumers.parts, 0.75); pulse(database, 0.65);
+    say(caption, "Manic does not guess RabbitMQ semantics—the creator explicitly authors each selected delivery.", 0.45);
+  }
+}
+wait(1.30);

package/examples/table.manic

@@ -0,0 +1,39 @@
+// Tables — a ruled grid of entries with row/column headers, manic's Table /
+// MathTable / IntegerTable. This is an addition table: each body cell is
+// row + column. We reveal it, then "look up" 2 + 5 by flashing that row and
+// column and lighting the answer — a demo of the table's tag addressing
+// (row{i} / col{j} / the labels / the grid lines are all recolourable).
+//
+//   manic examples/table.manic
+//   manic examples/table.manic --record out --fps 60
+
+title("Tables");
+canvas(1280, 720);
+
+text(head, (640, 110), "a grid you can read by row and column");
+display(head);  color(head, cyan);  size(head, 28);  hidden(head);
+text(cap, (640, 620), "");  color(cap, dim);  size(cap, 24);
+
+// body cells are the sums; headers are the addends (top-left corner is blank)
+table(t, "0 5 10; 2 7 12; 4 9 14", (640, 372), 120, 78, "0 5 10", "0 2 4");
+untraced(t.lines);
+hidden(t.labels);  hidden(t.entries);
+
+// --- reveal ---
+show(head, 0.5);
+say(cap, "rule the grid, then fill it in");
+draw(t.lines, 1.0);
+show(t.labels, 0.5);
+show(t.entries, 0.5);
+wait(0.5);
+
+// --- a lookup: 2 + 5 = 7 ---
+section("Look it up");
+say(cap, "read a cell as row + column");
+par { flash(t.rowlabel1, lime);  flash(t.collabel1, lime); }
+say(cap, "row 2, column 5 ...");
+par { flash(t.row1, cyan);  flash(t.col1, cyan); }
+say(cap, "2 + 5 = 7");
+recolor(t.r1c1, lime, 0.3);
+pulse(t.r1c1);
+wait(1.4);

package/examples/table_braces.manic

@@ -0,0 +1,54 @@
+// Table + Braces — a quarterly sales table, annotated with curly braces that
+// group its columns (the four quarters into two halves of the year) and its
+// rows (the two regions). A practical pattern: use a table for the data and
+// braces to call out how its rows/columns cluster.
+//
+// The brace coordinates are aligned to the table's grid lines by hand — the
+// table is centred at (640,360) with 110x70 cells, so its vertical rules fall
+// at x = 365 + k*110 and its rows span y = 325..465.
+//
+//   manic examples/table_braces.manic
+//   manic examples/table_braces.manic --record out --fps 60
+
+title("Sales by Region");
+canvas(1280, 720);
+
+text(head, (640, 96), "a data table, with its groups braced");
+display(head);  color(head, cyan);  size(head, 26);  hidden(head);
+text(cap, (640, 640), "");  color(cap, dim);  size(cap, 24);
+
+// rows = regions, columns = quarters; body cells are sales (in $k)
+table(t, "12 15 18 20; 9 11 14 16", (640, 360), 110, 70, "Q1 Q2 Q3 Q4", "North South");
+untraced(t.lines);
+hidden(t.labels);  hidden(t.entries);
+
+// column braces over the header row (bulge up: points run right -> left)
+bracelabel(h1, (695, 248), (475, 248), "H1", 26);   color(h1, magenta);   hidden(h1);
+bracelabel(h2, (915, 248), (695, 248), "H2", 26);    color(h2, lime);      hidden(h2);
+
+// a vertical brace to the left of the row labels, grouping the two regions
+bracelabel(reg, (356, 325), (356, 465), "Regions", 26);   color(reg, cyan);   hidden(reg);
+
+// --- reveal the table ---
+show(head, 0.5);
+say(cap, "quarterly sales for two regions");
+draw(t.lines, 1.0);
+show(t.labels, 0.5);
+show(t.entries, 0.5);
+wait(0.4);
+
+// --- brace the columns into halves of the year ---
+section("Halves of the year");
+say(cap, "Q1-Q2 are the first half, Q3-Q4 the second");
+par { flash(t.col0, magenta);  flash(t.col1, magenta); }
+show(h1, 0.5);
+par { flash(t.col2, lime);  flash(t.col3, lime); }
+show(h2, 0.5);
+wait(0.4);
+
+// --- brace the rows into regions ---
+section("The regions");
+say(cap, "and the two rows are the regions");
+par { flash(t.rowlabel0, cyan);  flash(t.rowlabel1, cyan); }
+show(reg, 0.6);
+wait(1.4);

package/examples/tangent-length-short.manic

@@ -0,0 +1,57 @@
+// tangent-length-short — 9:16 quiz Short (~23s): tangent from an external
+// point. Radius 5, distance 13 - the hidden 5-12-13 right triangle. The
+// tangent line and its touch point come from the geo kit (exact, not eyeballed).
+title("The Tangent Length Trick");
+canvas("9:16");
+template("black");
+
+creator(me, "@anish2good name=Science_Lab yt=zarigatongy x=@anish2good web=8gwifi.org/manic footer=social accent=cyan");
+
+quiz(q, `$P$ is 13 cm from the centre of a circle of radius 5 cm. How long is the tangent from $P$?`, "layout=media-first");
+option(q, "8 cm");
+option(q, "11 cm");
+option(q, "12 cm", correct);
+option(q, `$\sqrt{194}$ cm`);
+timing(q, "ask=4 options=4 think=8 reveal=3 hold=4");
+explain(q, `Radius meets tangent at $90^\circ$, so $x^2 = 13^2 - 5^2 = 144$: the 5-12-13 triple.`);
+
+// ---------- the figure (unit: 28 px per cm) ----------
+point(O, (cx - 160, 900), "O"); size(O.label, 30); hidden(O);
+point(P, (cx + 204, 900), "P"); size(P.label, 34); hidden(P);
+point(Q, (cx - 20, 900)); hidden(Q);              // helper: a point on the circle
+circle2(circ, O, Q); outlined(circ); stroke(circ, 3); untraced(circ);
+tangent(T, P, O, Q); hidden(T0); hidden(T1);       // touch points, kit-computed
+segment(hyp, O, P); stroke(hyp, 3); dashed(hyp); color(hyp, dim); untraced(hyp);
+segment(rad, O, T0); stroke(rad, 4); color(rad, gold); untraced(rad);
+segment(tanseg, P, T0); stroke(tanseg, 4); color(tanseg, cyan); untraced(tanseg);
+rightangle(ra, O, T0, P); color(ra, magenta); hidden(ra);
+text(n5, (cx - 185, 828), "5"); size(n5, 32); color(n5, gold); hidden(n5);
+text(n13, (cx + 22, 942), "13"); size(n13, 32); color(n13, dim); hidden(n13);
+text(nx, (cx + 70, 786), "x = ?"); size(nx, 32); color(nx, cyan); hidden(nx);
+text(n12, (cx + 70, 786), "x = 12"); size(n12, 32); color(n12, lime); hidden(n12);
+
+socials(me);
+
+// ================= timeline =================
+par {
+  run(q);
+  seq {
+    wait(0.8);
+    par { show(O, 0.4); show(P, 0.4); }
+    draw(circ, 1.2);
+    par { draw(hyp, 0.8); show(n13, 0.4); }
+    show(T0, 0.4);
+    draw(tanseg, 0.9);
+    show(nx, 0.4);
+    par { draw(rad, 0.8); show(n5, 0.4); }
+    // the given right angle IS the hint - show it during the think phase
+    show(ra, 0.4);
+    pulse(ra, 0.8);
+    // answer stamps in at the reveal (t = 16s)
+    wait(7.2);
+    par { fade(nx, 0.3); show(n12, 0.4); }
+    flash(tanseg, lime);
+    cue(pop);
+  }
+}
+wait(0.5);

package/examples/tangent.manic

@@ -0,0 +1,29 @@
+title("The Tangent Line — a curve's slope, made visible");
+canvas("16:9");
+
+text(hdr, (cx, 60), "The slope of sin x, everywhere at once");
+size(hdr, 30); color(hdr, cyan); bold(hdr); display(hdr); hidden(hdr);
+
+// the curve — plot remembers its function, so tangent can ask it questions.
+// center the domain 0..6.3 across the canvas (midpoint x=3.15 sits at cx)
+plot(f, (cx - 440, cy + 40), 140, 120, "sin(x)", (0, 6.3));
+color(f, cyan); stroke(f, 3); untraced(f);
+
+// a tangent that touches f where x = 0.5 (line + contact dot, one call)
+tangent(tan, f, 0.5, 260);
+color(tan, gold); untraced(tan);
+
+text(cap, (cx, h - 60), "watch the tilt follow the curve");
+size(cap, 20); color(cap, dim); display(cap); hidden(cap);
+
+// ---- timeline ----
+show(hdr, 0.5);
+draw(f, 1.4);
+show(tan, 0.6);
+show(cap, 0.4);
+wait(0.4);
+
+// slide the touch point along the whole curve — the slope is derived live
+to(tan, x, 5.8, 5);
+wait(0.3);
+to(tan, x, 1.6, 2.5);   // back toward the first peak, where the slope is 0

package/examples/tangents.manic

@@ -0,0 +1,54 @@
+// Tangent Lines — the two tangents from an external point P to a circle, and
+// the theorem that each tangent is perpendicular to the radius at its touch
+// point. Everything is a DYNAMIC construction: move P and the touch points,
+// tangent lines, radii, and right-angle marks all recompute live.
+//
+// New geo builtins: circle2 (circle by centre + a point on it), tangent
+// (touch points from an external point), plus segment/rightangle tracking them.
+//
+//   manic examples/tangents.manic
+
+title("Tangent Lines");
+canvas("16:9");
+
+text(head, (cx, 96), "two tangents from a point -- each meets the radius at 90 degrees");
+color(head, cyan);  size(head, 24);  hidden(head);
+
+point(O, (520, 400), "O");
+point(A, (520, 200));          // a point on the circle -> radius 200
+point(P, (940, 380), "P");
+hidden(A);                      // A just defines the radius; don't show it
+
+circle2(circ, O, A);  color(circ, dim);  stroke(circ, 2);  untraced(circ);
+
+// the two touch points t0 / t1, and the tangent lines to them
+tangent(t, P, O, A);
+segment(l0, P, t0);   color(l0, cyan);   stroke(l0, 3);   untraced(l0);
+segment(l1, P, t1);   color(l1, cyan);   stroke(l1, 3);   untraced(l1);
+
+// radius to each touch point + the right-angle marks
+segment(r0, O, t0);   color(r0, dim);    untraced(r0);
+segment(r1, O, t1);   color(r1, dim);    untraced(r1);
+rightangle(ra0, O, t0, P);   color(ra0, lime);   hidden(ra0);
+rightangle(ra1, O, t1, P);   color(ra1, lime);   hidden(ra1);
+
+// --- reveal ---
+show(head, 0.5);
+draw(circ, 0.8);
+show(O, 0.3);  show(P, 0.3);
+section("The tangents");
+par { draw(l0, 0.7);  draw(l1, 0.7); }
+show(t0, 0.3);  show(t1, 0.3);
+section("Radius meets tangent");
+par { draw(r0, 0.5);  draw(r1, 0.5); }
+par { show(ra0, 0.4);  show(ra1, 0.4); }
+wait(0.6);
+
+// --- prove it's dynamic: move P, everything tracks ---
+section("Move the point");
+move(P, (820, 230), 1.6, smooth);
+wait(0.4);
+move(P, (980, 470), 1.6, smooth);
+wait(0.8);
+move(P, (940, 380), 1.2, smooth);
+wait(1.0);

package/examples/taylor.manic

@@ -0,0 +1,44 @@
+title("Taylor series — polynomials closing in on a curve");
+canvas("16:9");
+
+let ox = cx;         // x=0 at centre
+let oy = cy + 10;
+
+text(hdr, (cx, 52), "Add one more term, and the polynomial hugs more of the curve");
+size(hdr, 24); color(hdr, cyan); bold(hdr); display(hdr); hidden(hdr);
+
+axes(ax, (ox, oy), 640, 260, 1);
+color(ax, dim); untraced(ax);
+
+// the target function
+plot(f, (ox, oy), 95, 120, "sin(x)", (-6.2, 6.2));
+color(f, cyan); stroke(f, 5); untraced(f);
+
+// Taylor polynomials about x = 0, growing in degree
+taylor(p1, f, 0, 1);
+color(p1, dim); stroke(p1, 3); untraced(p1);
+taylor(p3, f, 0, 3);
+color(p3, gold); stroke(p3, 3); untraced(p3);
+taylor(p5, f, 0, 5);
+color(p5, magenta); stroke(p5, 3); untraced(p5);
+taylor(p7, f, 0, 7);
+color(p7, lime); stroke(p7, 3); untraced(p7);
+
+text(l1, (cx + 300, 150), "n = 1   (a line)");
+size(l1, 18); color(l1, dim); display(l1); hidden(l1);
+text(l3, (cx + 300, 186), "n = 3");
+size(l3, 18); color(l3, gold); display(l3); hidden(l3);
+text(l5, (cx + 300, 222), "n = 5");
+size(l5, 18); color(l5, magenta); display(l5); hidden(l5);
+text(l7, (cx + 300, 258), "n = 7");
+size(l7, 18); color(l7, lime); display(l7); hidden(l7);
+
+// ---- timeline ----
+show(hdr, 0.6);
+draw(ax, 0.7);
+draw(f, 1.6);
+wait(0.3);
+draw(p1, 0.8);  show(l1, 0.3);  wait(0.3);
+draw(p3, 0.9);  show(l3, 0.3);  wait(0.3);
+draw(p5, 1.0);  show(l5, 0.3);  wait(0.3);
+draw(p7, 1.1);  show(l7, 0.3);

package/examples/terminal_boot.manic

@@ -0,0 +1,40 @@
+// Terminal Boot — a fake boot sequence typed out line by line, ending at a live
+// prompt with a blinking-style cursor. Shows off the `cursor` modifier, `type`
+// typewriter reveal, an author-set `masthead`, and the `terminal` template.
+//
+//   manic examples/terminal_boot.manic
+//   manic examples/terminal_boot.manic --record out --fps 60
+
+title("manic");
+canvas("16:9");
+template("terminal");
+masthead("manic ~ %", "READY");     // your own header text (no engine branding)
+
+text(l1, (cx, 210), "");   color(l1, lime);     size(l1, 24);
+text(l2, (cx, 260), "");   color(l2, cyan);     size(l2, 24);   hidden(l2);
+text(l3, (cx, 310), "");   color(l3, cyan);     size(l3, 24);   hidden(l3);
+text(l4, (cx, 360), "");   color(l4, lime);     size(l4, 24);   hidden(l4);
+text(prompt, (cx, 440), "");  color(prompt, fg);  size(prompt, 28);  display(prompt);
+hidden(prompt);  cursor(prompt);    // only the live prompt gets the cursor
+
+// --- boot log ---
+say(l1, "> initializing manic engine", 0.1);
+type(l1, 1.0);
+
+show(l2, 0.2);
+say(l2, "  loaded kits: std math geo algo brand", 0.1);
+type(l2, 1.3);
+
+show(l3, 0.2);
+say(l3, "  timeline: deterministic @ 60fps", 0.1);
+type(l3, 1.0);
+
+show(l4, 0.2);
+say(l4, "  ready.", 0.1);
+type(l4, 0.5);
+
+// --- the prompt, awaiting input ---
+show(prompt, 0.2);
+say(prompt, "manic ~ % render my_idea", 0.1);
+type(prompt, 1.2);
+wait(1.6);