@maniclang/workbench 0.1.11

package/examples/bullet-impact.manic

@@ -0,0 +1,65 @@
+// ============================================================================
+//  bullet-impact.manic  —  best of both: the movie AND the physics
+// ----------------------------------------------------------------------------
+//  The cinematic gun-shot (gun · muzzle flash · a flying camera · BOOM) wrapped
+//  around the REAL `bulletblock` physics sim. The collision is genuinely true —
+//  a perfectly inelastic impact, momentum conserved, the live speed readout
+//  actually collapsing 40 → ~1 — and the BOOM is SYNCED to the physical impact.
+//  A sim's parts are ordinary entities, so the story and the physics compose.
+// ============================================================================
+
+title("Impact — the movie meets the physics");
+canvas("16:9");
+
+// ---- the REAL physics: bullet + block, inelastic collision + live speed readout ----
+// a lighter block, so the hit visibly KNOCKS it and it slides on afterward
+bulletblock(bb, (cx, 430), 0.05, 40, 0.9);
+hidden(bb);
+sticky(bb.vel);                     // pin the live speed readout through the camera moves
+
+// ---- cinematic dressing (base manic) ----
+rect(barrel, (200, 380), 82, 20); color(barrel, dim); filled(barrel);
+rect(body, (166, 386), 42, 34);   color(body, dim);   filled(body);
+polygon(grip, (150, 404), (176, 404), (170, 442), (146, 438), dim);
+circle(mflash, (242, 380), 28);   color(mflash, gold); glow(mflash, 3.5); hidden(mflash);
+
+text(boom, (730, 250), "BOOM!"); size(boom, 84); color(boom, magenta); bold(boom); glow(boom, 2.5); display(boom); hidden(boom);
+for i in 0..14 {
+  let ang = i * tau / 14.0;
+  line(spark{i}, (730, 380), (730 + 150*cos(ang), 380 + 150*sin(ang)));
+  color(spark{i}, gold); stroke(spark{i}, 5); glow(spark{i}, 2); untraced(spark{i}); tag(spark{i}, sparks);
+}
+
+text(cap, (cx, h - 46), ""); color(cap, fg); size(cap, 22); bold(cap); display(cap); sticky(cap);
+
+// ================= THE SCENE =================
+cam((430, 400), 0.4, smooth);
+say(cap, "a scene — and it's really physics underneath", 0.4);
+wait(0.5);
+
+say(cap, "FIRE!", 0.2);
+par { show(mflash, 0.06); pulse(mflash); show(bb, 0.1); }
+fade(mflash, 0.3);
+
+// the bullet flies (REAL physics, slow-mo) · the camera pushes toward the block ·
+// the BOOM fires exactly when the sim's bullet embeds (55% of the run) · then it
+// KEEPS GOING — the block is knocked, slides on, and the camera follows it
+par {
+  run(bb, 7);
+  cam((720, 380), 3.6, smooth);       // push toward the impact during the flight
+  zoom(1.2, 3.6, smooth);
+  seq {
+    wait(3.85);                        // the physical impact (55% of the run)
+    // CONTACT → zoom-punch + BOOM
+    say(cap, "CONTACT!", 0.12);
+    par { flash(bb.block, gold); shake(bb.block, 0.6); zoom(1.6, 0.15); show(boom, 0.12); pulse(boom); draw(sparks, 0.3); }
+    // …and it CONTINUES — sparks clear, the block slides on, camera follows
+    say(cap, "…knocked back — it slides on", 0.3);
+    par { fade(sparks, 0.5); fade(boom, 0.7); cam((1010, 380), 2.4, smooth); zoom(1.15, 2.4, smooth); }
+  }
+}
+
+// it comes to rest — and the physics was true the whole way through
+par { zoom(1.0, 0.9, smooth); cam((cx, 360), 0.9, smooth); }
+say(cap, "…and rest. A movie on top, real physics underneath: 40 m/s → the block's crawl", 0.4);
+wait(1.0);

package/examples/bungee.manic

@@ -0,0 +1,9 @@
+// bungee.manic — free-fall, then a one-sided elastic cord catches the jumper.
+title("Bungee jump — free-fall, then bounce");
+canvas("16:9");
+text(hdr,(cx,44),"Bungee — the cord only PULLS: free-fall, then an elastic bounce"); size(hdr,22); color(hdr,cyan); bold(hdr); display(hdr);
+bungee(bg, (640,110));
+phase(bg, (1000,200), 95);       // asymmetric well shows in the phase loop
+well(bg, (1000,470), 95);        // linear (fall) → parabola (cord): a lopsided well
+text(cap,(cx,h-32),"note the lopsided energy well — flat during free-fall, steep once the cord bites"); size(cap,15); color(cap,dim); display(cap);
+run(bg, 11);

package/examples/c4-internet-banking-components.manic

@@ -0,0 +1,33 @@
+title("Internet Banking — C4 Components");
+canvas("16:9");
+template("mono");
+
+let u = (w+h-abs(w-h))/1440;
+watermark(mark, (w*0.15, h*0.04), "Made With Manic");
+text(kicker, (cx, h*0.055), "DIAGRAMS · C4 · COMPONENT");
+text(headline, (cx, h*0.12), "Inside the API Application");
+size(kicker, 15*u); color(kicker, dim); bold(kicker);
+size(headline, 24*u); bold(headline); wrap(headline, w*0.86);
+
+// Level 3 — zoom into a container: its components. `component` is a C4 node kind;
+// the dependencies it talks to sit below as externals.
+// Declaration order = left-to-right in the tier, so keep each related pair
+// adjacent (sign-in beside security, accounts beside the facade) — their "Uses"
+// edge then sits in the gap instead of crossing an intervening box.
+c4(api, component);
+node(signin,   api, "component", "Sign-In Controller", "Lets users sign in", "Spring MVC");
+node(security, api, "component", "Security Component", "Authentication and access control", "Spring Bean");
+node(accounts, api, "component", "Accounts Controller", "Provides account summaries", "Spring MVC");
+node(facade,   api, "component", "Mainframe Facade", "A facade over the mainframe", "Spring Bean");
+node(db,   api, "external", "Database", "Stores users, accounts and payments");
+node(mf,   api, "external", "Mainframe Banking System", "Stores core banking information");
+
+connect(c1, signin,   security); annotate(c1, "Uses");
+connect(c2, accounts, facade);   annotate(c2, "Uses");
+connect(c3, security, db);       annotate(c3, "Reads/writes [JDBC]");
+connect(c4x, facade,  mf);       annotate(c4x, "Uses [XML/HTTPS]");
+
+color(c1, cyan); color(c1.hot, cyan);
+color(c2, cyan); color(c2.hot, cyan);
+color(c3, cyan); color(c3.hot, cyan);
+color(c4x, gold); color(c4x.hot, gold);

package/examples/c4-internet-banking-containers.manic

@@ -0,0 +1,29 @@
+title("Internet Banking — C4 Containers");
+canvas("16:9");
+template("mono");
+
+let u = (w+h-abs(w-h))/1440;
+watermark(mark, (w*0.15, h*0.04), "Made With Manic");
+text(kicker, (cx, h*0.055), "DIAGRAMS · C4 · CONTAINER");
+text(headline, (cx, h*0.12), "Inside the Internet Banking System");
+size(kicker, 15*u); color(kicker, dim); bold(kicker);
+size(headline, 24*u); bold(headline); wrap(headline, w*0.86);
+
+// Level 2 — zoom into the system: its containers, each with a technology. The
+// technology is the optional 6th `node` argument, shown in the `[Container: …]` tag.
+c4(bank, container);
+node(cust, bank, "person",    "Customer", "A retail banking customer");
+node(spa,  bank, "container", "Single-Page App", "Account summary and payments in the browser", "JavaScript / Angular");
+node(api,  bank, "container", "API Application", "Banking functionality via a JSON/HTTPS API", "Java / Spring Boot");
+node(db,   bank, "container", "Database", "Stores users, accounts and payments", "Oracle");
+node(core, bank, "external",  "Mainframe Banking System", "Stores core banking information");
+
+connect(r1, cust, spa); annotate(r1, "Uses [HTTPS]");
+connect(r2, spa, api);  annotate(r2, "Calls [JSON/HTTPS]");
+connect(r3, api, db);   annotate(r3, "Reads/writes [JDBC]");
+connect(r4, api, core); annotate(r4, "Uses [XML/HTTPS]");
+
+color(r1, cyan); color(r1.hot, cyan);
+color(r2, cyan); color(r2.hot, cyan);
+color(r3, cyan); color(r3.hot, cyan);
+color(r4, gold); color(r4.hot, gold);

package/examples/c4-internet-banking.manic

@@ -0,0 +1,26 @@
+title("Internet Banking — C4 System Context");
+canvas("16:9");
+template("mono");
+
+let u = (w+h-abs(w-h))/1440;
+watermark(mark, (w*0.15, h*0.04), "Made With Manic");
+text(kicker, (cx, h*0.055), "DIAGRAMS · C4 · SYSTEM CONTEXT");
+text(headline, (cx, h*0.12), "Internet Banking — the big picture");
+size(kicker, 15*u); color(kicker, dim); bold(kicker);
+size(headline, 24*u); bold(headline); wrap(headline, w*0.86);
+
+// `c4(id, level)` — inside it, node kinds are C4 elements. The extra args are the
+// box's description and (for containers) technology. No coordinates.
+c4(bank, context);
+node(cust, bank, "person",   "Personal Banking Customer", "A customer of the bank with personal accounts");
+node(ibs,  bank, "system",   "Internet Banking System",   "Lets customers view accounts and make payments");
+node(mail, bank, "external", "E-mail System",             "Sends notifications to customers");
+node(core, bank, "external", "Mainframe Banking System",  "Stores core banking information");
+
+connect(r1, cust, ibs);  annotate(r1, "Views accounts, makes payments");
+connect(r2, ibs, core);  annotate(r2, "Reads/writes [XML/HTTPS]");
+connect(r3, ibs, mail);  annotate(r3, "Sends e-mail [SMTP]");
+
+color(r1, cyan);    color(r1.hot, cyan);
+color(r2, cyan);    color(r2.hot, cyan);
+color(r3, gold);    color(r3.hot, gold);

package/examples/c4-story.manic

@@ -0,0 +1,171 @@
+title("C4 — One System, at Every Altitude");
+canvas("16:9");
+template("mono");
+
+let u = (w+h-abs(w-h))/1440;
+watermark(mark, (w*0.15, h*0.04), "Made With Manic"); sticky(mark);
+text(kicker, (cx, h*0.055), "DIAGRAMS · C4 · CONTEXT → CONTAINER → COMPONENT");
+size(kicker, 15*u); color(kicker, dim); bold(kicker); sticky(kicker);
+text(cap, (cx, h*0.93), "Every system lives in a world of people and neighbours.");
+size(cap, 16*u); color(cap, dim); wrap(cap, w*0.86); sticky(cap);
+
+// ---- Level 1: System Context ----
+c4(ctx, context);
+node(cust, ctx, "person",   "Customer", "A retail banking customer");
+node(sys,  ctx, "system",   "Internet Banking System", "View accounts, make payments");
+node(mail, ctx, "external", "E-mail System", "Sends notifications");
+node(core, ctx, "external", "Mainframe", "Core banking information");
+connect(cx1, cust, sys); annotate(cx1, "Uses");
+connect(cx2, sys, core); annotate(cx2, "Reads/writes [XML/HTTPS]");
+connect(cx3, sys, mail); annotate(cx3, "Sends e-mail [SMTP]");
+color(cx1, cyan); color(cx1.hot, cyan);
+color(cx2, cyan); color(cx2.hot, cyan);
+color(cx3, gold); color(cx3.hot, gold);
+
+// ---- Level 2: Containers ----
+c4(cnt, container);
+node(ccust, cnt, "person",    "Customer", "A retail banking customer");
+node(spa,   cnt, "container", "Single-Page App", "Account UI in the browser", "JavaScript / Angular");
+node(api,   cnt, "container", "API Application", "Banking functionality (JSON/HTTPS)", "Java / Spring Boot");
+node(cdb,   cnt, "container", "Database", "Users, accounts, payments", "Oracle");
+node(cmf,   cnt, "external",  "Mainframe", "Core banking information");
+connect(cn1, ccust, spa); annotate(cn1, "Uses [HTTPS]");
+connect(cn2, spa, api);   annotate(cn2, "Calls [JSON/HTTPS]");
+connect(cn3, api, cdb);   annotate(cn3, "Reads/writes [JDBC]");
+connect(cn4, api, cmf);   annotate(cn4, "Uses [XML/HTTPS]");
+color(cn1, cyan); color(cn1.hot, cyan);
+color(cn2, cyan); color(cn2.hot, cyan);
+color(cn3, cyan); color(cn3.hot, cyan);
+color(cn4, gold); color(cn4.hot, gold);
+
+// ---- Level 3: Components (inside the API) ----
+// Declaration order fills the 2x2 grid row-major, so ordering the pairs as
+// (signin, accounts) then (security, facade) makes two clean vertical columns:
+//   sign-in → security → database   |   accounts → facade → mainframe
+c4(cmp, component);
+node(signin, cmp, "component", "Sign-In Controller", "Lets users sign in", "Spring MVC");
+node(acct,   cmp, "component", "Accounts Controller", "Account summaries", "Spring MVC");
+node(sec,    cmp, "component", "Security Component", "Authentication & access", "Spring Bean");
+node(fac,    cmp, "component", "Mainframe Facade", "Facade over the mainframe", "Spring Bean");
+node(mdb,    cmp, "external",  "Database", "Users, accounts, payments");
+node(mmf,    cmp, "external",  "Mainframe", "Core banking information");
+connect(cp1, signin, sec); annotate(cp1, "Uses");
+connect(cp2, acct, fac);   annotate(cp2, "Uses");
+connect(cp3, sec, mdb);    annotate(cp3, "Reads/writes [JDBC]");
+connect(cp4, fac, mmf);    annotate(cp4, "Uses [XML/HTTPS]");
+color(cp1, cyan); color(cp1.hot, cyan);
+color(cp2, cyan); color(cp2.hot, cyan);
+color(cp3, cyan); color(cp3.hot, cyan);
+color(cp4, gold); color(cp4.hot, gold);
+
+// tokens: one request per level
+request(req,  ccust,  "GET /accounts");
+request(req2, signin, "authorise");
+
+// Start at Context; everything else is hidden and overlaps the same centre.
+hidden(cnt); hidden(cnt.nodes); hidden(cnt.connections); hidden(cnt.hotpaths);
+hidden(cmp); hidden(cmp.nodes); hidden(cmp.connections); hidden(cmp.hotpaths);
+hidden(ctx.nodes);
+hidden(req.parts); hidden(req2.parts);
+
+// 1 — the system in its world (pieces arrive one by one)
+step("context") {
+  seq {
+    stagger(0.12) { show(cust, 0.4); show(sys, 0.4); show(mail, 0.4); show(core, 0.4); }
+    draw(ctx.connections, 0.7);
+  }
+}
+wait(0.5);
+
+// 2 — push into the system
+step("into-system") {
+  par {
+    say(cap, "Zoom into the system…", 0.4);
+    zoom(2.5, 1.1, smooth);
+    fade(cust, 0.6); fade(mail, 0.6); fade(core, 0.6); fade(ctx.connections, 0.6);
+  }
+}
+wait(0.2);
+
+// 3 — inside, the containers ASSEMBLE as the request travels through them.
+// The dot leads: each box + its edge materialise just as the call arrives.
+step("containers") {
+  seq {
+    par {
+      say(cap, "Inside — a request builds the containers as it travels.", 0.4);
+      fade(sys, 0.4);
+      zoom(1.0, 1.0, smooth);
+    }
+    par { show(ccust, 0.4); show(req.parts, 0.25); }
+    par { show(cn1, 0.6); show(cn1.text.bg, 0.6); show(cn1.text, 0.6); show(spa, 0.5); route(req, cn1, 0.6, smooth); }
+    par { show(cn2, 0.6); show(cn2.text.bg, 0.6); show(cn2.text, 0.6); show(api, 0.5); route(req, cn2, 0.6, smooth); }
+    par { show(cn3, 0.7); show(cn3.text.bg, 0.7); show(cn3.text, 0.7); show(cdb, 0.5); route(req, cn3, 0.7, smooth); }
+    par { show(cmf, 0.5); show(cn4, 0.6); show(cn4.text.bg, 0.6); show(cn4.text, 0.6); }
+  }
+}
+wait(0.5);
+
+// 4 — push into the API container
+step("into-api") {
+  par {
+    say(cap, "Zoom into the API…", 0.4);
+    zoom(2.4, 1.1, smooth);
+    fade(ccust, 0.6); fade(spa, 0.6); fade(cdb, 0.6); fade(cmf, 0.6);
+    fade(cnt.connections, 0.6); fade(req.parts, 0.4);
+  }
+}
+wait(0.2);
+
+// 5 — inside the API, the components ASSEMBLE as the sign-in call travels.
+step("components") {
+  seq {
+    par {
+      say(cap, "…inside, a sign-in call builds the components it touches.", 0.4);
+      fade(api, 0.4);
+      zoom(1.0, 1.0, smooth);
+    }
+    par { show(signin, 0.4); show(req2.parts, 0.25); }
+    par { show(cp1, 0.6); show(cp1.text.bg, 0.6); show(cp1.text, 0.6); show(sec, 0.5); route(req2, cp1, 0.6, smooth); }
+    par { show(cp3, 0.7); show(cp3.text.bg, 0.7); show(cp3.text, 0.7); show(mdb, 0.5); route(req2, cp3, 0.7, smooth); }
+    par {
+      show(acct, 0.5); show(fac, 0.5); show(mmf, 0.5);
+      show(cp2, 0.6); show(cp2.text.bg, 0.6); show(cp2.text, 0.6);
+      show(cp4, 0.6); show(cp4.text.bg, 0.6); show(cp4.text, 0.6);
+    }
+  }
+}
+wait(0.5);
+
+// 8 — climb back to the containers (fade components out, pull back, reveal)
+step("back-to-containers") {
+  seq {
+    par {
+      say(cap, "Zoom back out to the containers…", 0.4);
+      fade(cmp.nodes, 0.4); fade(cmp.connections, 0.4); fade(req2.parts, 0.3);
+      zoom(0.8, 0.5, smooth);
+    }
+    par {
+      zoom(1.0, 0.6, smooth);
+      show(ccust, 0.5); show(spa, 0.5); show(api, 0.5); show(cdb, 0.5); show(cmf, 0.5);
+      show(cnt.connections, 0.5);
+    }
+  }
+}
+wait(0.4);
+
+// 9 — and out to the whole system in its world
+step("back-to-context") {
+  seq {
+    par {
+      say(cap, "…and out to the whole system, at every altitude. That is manic.", 0.5);
+      fade(ccust, 0.4); fade(spa, 0.4); fade(api, 0.4); fade(cdb, 0.4); fade(cmf, 0.4);
+      fade(cnt.connections, 0.4);
+      zoom(0.8, 0.5, smooth);
+    }
+    par {
+      zoom(1.0, 0.6, smooth);
+      show(cust, 0.6); show(sys, 0.6); show(mail, 0.6); show(core, 0.6); show(ctx.connections, 0.6);
+    }
+  }
+}
+wait(1.6);

package/examples/c4-test.manic

@@ -0,0 +1,52 @@
+title("Container diagram — Internet Banking System");
+canvas("16:9");
+template("mono");
+
+let u = (w+h-abs(w-h))/1440;
+watermark(mark, (w*0.15, h*0.04), "Made With Manic");
+text(kicker, (cx, h*0.055), "DIAGRAMS · C4 · CONTAINER");
+text(headline, (cx, h*0.12), "Container diagram for Internet Banking System");
+size(kicker, 15*u); color(kicker, dim); bold(kicker);
+size(headline, 22*u); bold(headline); wrap(headline, w*0.86);
+
+// One c4 container diagram. Tiers do the grouping — person on top, the internal
+// containers in the middle (they auto-split into balanced sub-rows), external
+// systems on the bottom. Declaration order = left→right / row-major, so keep
+// related boxes adjacent (web beside spa, spa's path down to api beside db).
+c4(ib, container);
+
+// person — top tier
+node(cust, ib, "person", "Personal Banking Customer", "A customer of the bank, with personal bank accounts");
+
+// internal containers — middle tier
+node(web, ib, "container", "Web Application", "Delivers static content and the Internet banking SPA", "Java / Spring MVC");
+node(spa, ib, "container", "Single-Page Application", "Internet banking in the web browser", "JavaScript / Angular");
+node(mob, ib, "container", "Mobile App", "A subset of the banking functionality", "Xamarin");
+node(api, ib, "container", "API Application", "Banking functionality via a JSON/HTTPS API", "Java / Spring MVC");
+node(db,  ib, "container", "Database", "Stores users, credentials and access logs", "Oracle");
+
+// external systems — bottom tier
+node(email, ib, "external", "E-mail System", "The internal Microsoft Exchange system");
+node(mf,    ib, "external", "Mainframe Banking System", "Core banking: customers, accounts, transactions");
+
+connect(e1,  cust, web);   annotate(e1,  "Visits bigbank.com/ib [HTTPS]");
+connect(e2,  cust, spa);   annotate(e2,  "Views balances, makes payments");
+connect(e3,  cust, mob);   annotate(e3,  "Views balances, makes payments");
+connect(e4,  web,  spa);   annotate(e4,  "Delivers to the browser");
+connect(e5,  spa,  api);   annotate(e5,  "API calls [JSON/HTTPS]");
+connect(e6,  mob,  api);   annotate(e6,  "API calls [JSON/HTTPS]");
+connect(e7,  api,  db);    annotate(e7,  "Reads/writes [JDBC]");
+connect(e8,  api,  email); annotate(e8,  "Sends e-mail [SMTP]");
+connect(e9,  api,  mf);    annotate(e9,  "API calls [XML/HTTPS]");
+connect(e10, email, cust); annotate(e10, "Sends e-mails to");
+
+color(e1, cyan); color(e1.hot, cyan);
+color(e2, cyan); color(e2.hot, cyan);
+color(e3, cyan); color(e3.hot, cyan);
+color(e4, cyan); color(e4.hot, cyan);
+color(e5, cyan); color(e5.hot, cyan);
+color(e6, cyan); color(e6.hot, cyan);
+color(e7, cyan); color(e7.hot, cyan);
+color(e8, gold); color(e8.hot, gold);
+color(e9, gold); color(e9.hot, gold);
+color(e10, gold); color(e10.hot, gold);

package/examples/c4-zoom.manic

@@ -0,0 +1,69 @@
+title("C4 — Zoom From Context Into Containers");
+canvas("16:9");
+template("mono");
+
+let u = (w+h-abs(w-h))/1440;
+watermark(mark, (w*0.15, h*0.04), "Made With Manic"); sticky(mark);
+text(kicker, (cx, h*0.055), "DIAGRAMS · C4 · CONTEXT → CONTAINER");
+size(kicker, 15*u); color(kicker, dim); bold(kicker); sticky(kicker);
+text(cap, (cx, h*0.93), "One system in its world.");
+size(cap, 16*u); color(cap, dim); wrap(cap, w*0.86); sticky(cap);
+
+// ---- Level 1: System Context (visible first) ----
+c4(ctx, context);
+node(cust, ctx, "person",   "Customer", "A retail banking customer");
+node(ibs,  ctx, "system",   "Internet Banking System", "View accounts, make payments");
+node(mail, ctx, "external", "E-mail System", "Sends notifications");
+node(core, ctx, "external", "Mainframe", "Core banking information");
+connect(x1, cust, ibs); annotate(x1, "Uses");
+connect(x2, ibs, mail); annotate(x2, "Sends e-mail [SMTP]");
+connect(x3, ibs, core); annotate(x3, "Reads/writes [XML/HTTPS]");
+color(x1, cyan); color(x1.hot, cyan);
+color(x2, gold); color(x2.hot, gold);
+color(x3, cyan); color(x3.hot, cyan);
+
+// ---- Level 2: Containers (hidden until we zoom in) ----
+c4(cnt, container);
+node(pcust, cnt, "person",    "Customer", "A retail banking customer");
+node(spa,   cnt, "container", "Single-Page App", "Account UI in the browser", "JavaScript / Angular");
+node(api,   cnt, "container", "API Application", "Banking functionality (JSON/HTTPS)", "Java / Spring Boot");
+node(db,    cnt, "container", "Database", "Users, accounts and payments", "Oracle");
+node(mf,    cnt, "external",  "Mainframe", "Core banking information");
+connect(y1, pcust, spa); annotate(y1, "Uses [HTTPS]");
+connect(y2, spa, api);   annotate(y2, "Calls [JSON/HTTPS]");
+connect(y3, api, db);    annotate(y3, "Reads/writes [JDBC]");
+connect(y4, api, mf);    annotate(y4, "Uses [XML/HTTPS]");
+color(y1, cyan); color(y1.hot, cyan);
+color(y2, cyan); color(y2.hot, cyan);
+color(y3, cyan); color(y3.hot, cyan);
+color(y4, gold); color(y4.hot, gold);
+
+// The container diagram overlaps the context one (both centred) — hide it, and its
+// duplicate frame, until the zoom reveals it.
+hidden(cnt);
+hidden(cnt.nodes); hidden(cnt.connections); hidden(cnt.hotpaths);
+
+wait(0.8);
+
+// Push the camera into the centred system, dropping everything around it.
+step("zoom-in") {
+  par {
+    say(cap, "Zoom into the Internet Banking System…", 0.4);
+    zoom(2.6, 1.1, smooth);
+    fade(cust, 0.6); fade(mail, 0.6); fade(core, 0.6);
+    fade(ctx.connections, 0.6);
+  }
+}
+wait(0.2);
+
+// The system dissolves and its containers rise in as the camera pulls back.
+step("open") {
+  par {
+    say(cap, "…and its containers are inside: SPA → API → Database.", 0.4);
+    fade(ibs, 0.4);
+    zoom(1.0, 1.0, smooth);
+    show(cnt.nodes, 0.7);
+    show(cnt.connections, 0.8);
+  }
+}
+wait(1.4);

package/examples/calculus-demo.manic

@@ -0,0 +1,129 @@
+title("Calculus, visualized — the derivative and the integral");
+canvas("16:9");
+
+// screen anchor for the plot: math (0,0) maps here. Placing it at cx-450 with
+// sx=150 centres the domain 0..6 under the canvas centre.
+let ox = cx - 450;
+let oy = cy + 120;
+let sx = 150;          // screen px per unit of x
+let sy = 170;          // screen px per unit of y
+
+// ---------------- header ----------------
+text(hdr, (cx, 54), "Two big ideas, one curve");
+size(hdr, 32); color(hdr, cyan); bold(hdr); display(hdr); hidden(hdr);
+
+text(flabel, (cx, 94), "f(x) = a smooth bell-shaped curve");
+size(flabel, 18); color(flabel, dim); display(flabel); hidden(flabel);
+
+// ---------------- the curve ----------------
+axes(ax, (ox, oy), 930, 205, 1);
+color(ax, dim); untraced(ax);
+
+// axis labels, at the arrow tips
+text(xlab, (ox + 958, oy + 6), "x");
+size(xlab, 24); color(xlab, dim); display(xlab); hidden(xlab);
+
+text(ylab, (ox, oy - 232), "f(x)");
+size(ylab, 24); color(ylab, dim); display(ylab); hidden(ylab);
+
+// numbered scale — each label sits at the plot's real coordinate:
+// x = k  ->  (ox + k*sx, oy)      y = v  ->  (ox, oy - v*sy)
+line(tx1, (ox + 1*sx, oy - 7), (ox + 1*sx, oy + 7)); color(tx1, dim); tag(tx1, scale); hidden(tx1);
+line(tx2, (ox + 2*sx, oy - 7), (ox + 2*sx, oy + 7)); color(tx2, dim); tag(tx2, scale); hidden(tx2);
+line(tx3, (ox + 3*sx, oy - 7), (ox + 3*sx, oy + 7)); color(tx3, dim); tag(tx3, scale); hidden(tx3);
+line(tx4, (ox + 4*sx, oy - 7), (ox + 4*sx, oy + 7)); color(tx4, dim); tag(tx4, scale); hidden(tx4);
+line(tx5, (ox + 5*sx, oy - 7), (ox + 5*sx, oy + 7)); color(tx5, dim); tag(tx5, scale); hidden(tx5);
+line(tx6, (ox + 6*sx, oy - 7), (ox + 6*sx, oy + 7)); color(tx6, dim); tag(tx6, scale); hidden(tx6);
+
+text(nx1, (ox + 1*sx, oy + 28), "1"); size(nx1, 16); color(nx1, dim); tag(nx1, scale); hidden(nx1);
+text(nx2, (ox + 2*sx, oy + 28), "2"); size(nx2, 16); color(nx2, dim); tag(nx2, scale); hidden(nx2);
+text(nx3, (ox + 3*sx, oy + 28), "3"); size(nx3, 16); color(nx3, dim); tag(nx3, scale); hidden(nx3);
+text(nx4, (ox + 4*sx, oy + 28), "4"); size(nx4, 16); color(nx4, dim); tag(nx4, scale); hidden(nx4);
+text(nx5, (ox + 5*sx, oy + 28), "5"); size(nx5, 16); color(nx5, dim); tag(nx5, scale); hidden(nx5);
+text(nx6, (ox + 6*sx, oy + 28), "6"); size(nx6, 16); color(nx6, dim); tag(nx6, scale); hidden(nx6);
+
+line(tyh, (ox - 7, oy - 0.5*sy), (ox + 7, oy - 0.5*sy)); color(tyh, dim); tag(tyh, scale); hidden(tyh);
+line(ty1, (ox - 7, oy - 1*sy),   (ox + 7, oy - 1*sy));   color(ty1, dim); tag(ty1, scale); hidden(ty1);
+text(nyh, (ox - 36, oy - 0.5*sy), "0.5"); size(nyh, 16); color(nyh, dim); tag(nyh, scale); hidden(nyh);
+text(ny1, (ox - 24, oy - 1*sy),   "1");   size(ny1, 16); color(ny1, dim); tag(ny1, scale); hidden(ny1);
+
+plot(f, (ox, oy), sx, sy, "exp(-0.5*(x-3)*(x-3))", (0, 6));
+color(f, cyan); stroke(f, 4); untraced(f);
+
+// ---------------- captions (swap per act) ----------------
+text(capd, (cx, h - 46), "THE DERIVATIVE   —   the slope at every point");
+size(capd, 22); color(capd, gold); bold(capd); display(capd); hidden(capd);
+
+text(capi, (cx, h - 46), "THE INTEGRAL   —   the area underneath");
+size(capi, 22); color(capi, lime); bold(capi); display(capi); hidden(capi);
+
+text(endcap, (cx, h - 46), "two views of one curve");
+size(endcap, 22); color(endcap, cyan); bold(endcap); display(endcap); hidden(endcap);
+
+// ---------------- derivative pieces ----------------
+tangent(tan, f, 0.4, 220);
+color(tan, gold); hidden(tan);
+
+slope(sl, f, 0.4);
+color(sl, gold); hidden(sl);
+
+// ---------------- integral pieces ----------------
+area(reg, f, 0, 0);
+color(reg, lime);
+
+text(ivlabel, (cx + 330, cy - 150), "area so far");
+size(ivlabel, 16); color(ivlabel, dim); display(ivlabel); hidden(ivlabel);
+
+integral(iv, f, 0, 0, (cx + 330, cy - 110));
+size(iv, 30); color(iv, lime); hidden(iv);
+
+// ================= timeline =================
+show(hdr, 0.6);
+show(flabel, 0.4);
+draw(ax, 0.8);
+par {
+  show(xlab, 0.4);
+  show(ylab, 0.4);
+  show(scale, 0.4);
+}
+draw(f, 1.6);
+wait(0.4);
+
+// --- Act 1: the derivative ---
+show(capd, 0.5);
+show(tan, 0.5);
+show(sl, 0.4);
+wait(0.3);
+par {                                 // climb to the peak — slope goes to zero
+  to(tan, x, 3, 2.2);
+  to(sl, x, 3, 2.2);
+}
+pulse(sl, 0.5);
+wait(0.3);
+par {                                 // over the top — slope turns negative
+  to(tan, x, 5.6, 2.6);
+  to(sl, x, 5.6, 2.6);
+}
+wait(0.4);
+
+// --- Act 2: the integral ---
+par {
+  fade(capd, 0.4);
+  fade(tan, 0.4);
+  fade(sl, 0.4);
+}
+show(capi, 0.5);
+show(ivlabel, 0.3);
+show(iv, 0.3);
+par {                                 // sweep the area open, number climbs
+  to(reg, x, 6, 4);
+  to(iv, x, 6, 4);
+}
+wait(0.4);
+flash(iv, lime);
+pulse(iv, 0.5);
+wait(0.4);
+
+// --- close ---
+fade(capi, 0.4);
+show(endcap, 0.6);