@maniclang/workbench 0.1.11

package/examples/gcp-clustered-web-services.manic

@@ -0,0 +1,186 @@
+title("Clustered Web Services on Google Cloud");
+canvas("16:9");
+template("neon");
+
+let u = (w+h-abs(w-h))/1440;
+watermark(mark, (w*0.15, h*0.025), "Made With Manic");
+text(kicker, (cx, h*0.055), "GOOGLE CLOUD ARCHITECTURE · CLUSTERED WEB SERVICES");
+text(headline, (cx, h*0.115), "Requests in. Responses back.");
+text(caption, (cx, h*0.935), "Dashed paths describe what is connected—not what is moving 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(clusteredWeb, (cx, h*0.51), w*0.84, h*0.70);
+  text(requestKey, (w*0.36, h*0.225), "REQUEST");
+  arrow(requestSample, (w*0.48, h*0.225), (w*0.64, h*0.225));
+  text(responseKey, (w*0.36, h*0.265), "RESPONSE");
+  arrow(responseSample, (w*0.48, h*0.265), (w*0.64, h*0.265));
+}
+else {
+  architecture(clusteredWeb, (cx, h*0.51), w*0.94, h*0.69);
+  text(requestKey, (w*0.105, h*0.205), "REQUEST");
+  arrow(requestSample, (w*0.15, h*0.205), (w*0.205, h*0.205));
+  text(responseKey, (w*0.105, h*0.245), "RESPONSE");
+  arrow(responseSample, (w*0.15, h*0.245), (w*0.205, h*0.245));
+}
+size(requestKey, 15*u); color(requestKey, fg); bold(requestKey);
+size(responseKey, 15*u); hue(responseKey, 328, 0.90, 0.62); bold(responseKey);
+color(requestSample, fg); stroke(requestSample, 3*u);
+hue(responseSample, 328, 0.90, 0.62); dashed(responseSample, 10*u, 7*u);
+stroke(responseSample, 4*u); glow(responseSample, 0.85);
+hidden(requestKey); hidden(requestSample);
+hidden(responseKey); hidden(responseSample);
+
+node(dns, clusteredWeb, "gcp:dns", "cloud dns");
+node(lb, clusteredWeb, "gcp:load-balancing", "load balancing");
+
+cluster(services, clusteredWeb, "SERVICES");
+node(web1, services, "gcp:kubernetes-engine", "web1");
+node(web2, services, "gcp:kubernetes-engine", "web2");
+node(web3, services, "gcp:kubernetes-engine", "web3");
+
+cluster(database, clusteredWeb, "DB CLUSTER");
+node(dbPrimary, database, "gcp:sql", "userdb");
+node(dbReplica, database, "gcp:sql", "userdb ro");
+
+node(cache, clusteredWeb, "gcp:memorystore", "memorystore");
+
+connect(dnsToLb, dns, lb);
+connect(lbToServices, lb, services);
+connect(servicesToDb, services, dbPrimary);
+connect(servicesToCache, services, cache, 145*u);
+connect(dbToServices, dbPrimary, services, 42*u);
+connect(servicesToLb, services, lb, 42*u);
+connect(cacheToWeb2, cache, web2, 145*u);
+hue(dbToServices.hot, 328, 0.90, 0.62);
+hue(servicesToLb.hot, 328, 0.90, 0.62);
+hue(cacheToWeb2.hot, 328, 0.90, 0.62);
+dashed(dbToServices.hot, 10*u, 7*u);
+dashed(servicesToLb.hot, 10*u, 7*u);
+dashed(cacheToWeb2.hot, 10*u, 7*u);
+stroke(dbToServices.hot, 4.5*u); glow(dbToServices.hot, 0.95);
+stroke(servicesToLb.hot, 4.5*u); glow(servicesToLb.hot, 0.95);
+stroke(cacheToWeb2.hot, 4.5*u); glow(cacheToWeb2.hot, 0.95);
+link(replication, dbPrimary.card, dbReplica.card);
+dashed(replication); color(replication, dim); stroke(replication, 2.5*u);
+
+message(pageRequest, dns, "GET");
+message(cacheRead, web2, "READ");
+
+hidden(clusteredWeb.nodes);
+hidden(services.parts); hidden(database.parts);
+hidden(pageRequest.parts); hidden(cacheRead.parts);
+untraced(dnsToLb); untraced(lbToServices);
+untraced(servicesToDb); untraced(servicesToCache);
+untraced(dbToServices); untraced(servicesToLb); untraced(cacheToWeb2);
+untraced(replication);
+
+step("entry") {
+  par {
+    show(dns, 0.40);
+    show(lb, 0.40);
+    say(caption, "Cloud DNS and Cloud Load Balancing form the public entry into the design.", 0.40);
+  }
+}
+wait(0.20);
+
+step("service-pool") {
+  par {
+    show(services.parts, 0.45);
+    stagger(0.10) {
+      show(web1, 0.35);
+      show(web2, 0.35);
+      show(web3, 0.35);
+    }
+    say(caption, "Three GKE services share one ownership boundary; no runtime choice is implied yet.", 0.40);
+  }
+}
+wait(0.20);
+
+step("state") {
+  par {
+    show(database.parts, 0.45);
+    show(dbPrimary, 0.40);
+    show(dbReplica, 0.40);
+    show(cache, 0.40);
+    say(caption, "The Cloud SQL cluster and Memorystore complete the static architecture.", 0.40);
+  }
+}
+wait(0.20);
+
+step("possible-topology") {
+  par {
+    draw(dnsToLb, 0.40);
+    draw(lbToServices, 0.60);
+    draw(servicesToDb, 0.60);
+    draw(servicesToCache, 0.60);
+    draw(replication, 0.45);
+    show(requestKey, 0.35); show(requestSample, 0.35);
+    show(responseKey, 0.35); show(responseSample, 0.35);
+    say(caption, "Every dashed lane is possible. The next moving object will identify the path actually used.", 0.40);
+  }
+}
+wait(0.30);
+
+step("request-to-database") {
+  par {
+    seq {
+      show(pageRequest.parts, 0.20);
+      route(pageRequest, dnsToLb, 0.65, smooth);
+      route(pageRequest, lbToServices, 0.90, smooth);
+      route(pageRequest, servicesToDb, 0.90, smooth);
+    }
+    say(caption, "This request follows one authored lane: dns → lb → web1 → userdb.", 0.40);
+  }
+}
+wait(0.35);
+
+step("database-response") {
+  par {
+    seq {
+      par {
+        say(pageRequest.label, "200 OK", 0.25);
+        to(pageRequest.parts, hue, 328, 0.25, smooth);
+      }
+      route(pageRequest, dbToServices, 0.90, smooth);
+      route(pageRequest, servicesToLb, 0.90, smooth);
+    }
+    say(caption, "The same identity returns userdb → web1 → lb. Cloud DNS resolved the name; it is not the HTTP response path.", 0.40);
+  }
+}
+wait(0.35);
+
+step("cache-round-trip") {
+  par {
+    seq {
+      show(cacheRead.parts, 0.20);
+      route(cacheRead, servicesToCache, 1.05, smooth);
+      par {
+        say(cacheRead.label, "HIT", 0.25);
+        to(cacheRead.parts, hue, 328, 0.25, smooth);
+      }
+      route(cacheRead, cacheToWeb2, 1.05, smooth);
+    }
+    say(caption, "A separate cache read travels web2 → memorystore, becomes HIT, and returns to that same service.", 0.40);
+  }
+}
+wait(0.35);
+
+step("replica-relationship") {
+  par {
+    flow(replication, 3.20, both, continuous);
+    say(caption, "The neutral database link can carry a two-way visual pulse only because the creator asked for it.", 0.40);
+  }
+}
+wait(0.35);
+
+step("takeaway") {
+  par {
+    pulse(services.parts, 0.70);
+    pulse(database.parts, 0.70);
+    say(caption, "Architecture stays readable; objects, paths, timing, and composition tell the runtime story.", 0.45);
+  }
+}
+wait(1.40);

package/examples/gcp-message-collecting.manic

@@ -0,0 +1,139 @@
+title("Message Collecting on Google Cloud — IoT to Data Lake");
+canvas("16:9");
+template("neon");
+
+let u = (w+h-abs(w-h))/1440;
+watermark(mark, (w*0.15, h*0.045), "Made With Manic");
+text(kicker, (cx, h*0.05), "GOOGLE CLOUD · IOT MESSAGE COLLECTING");
+text(headline, (cx, h*0.11), "Devices publish once. The pipeline fans out.");
+text(caption, (cx, h*0.94), "Dashed relationships show every route the architecture allows.");
+size(kicker, 15*u); color(kicker, dim); bold(kicker);
+size(headline, 26*u); bold(headline); wrap(headline, w*0.88);
+size(caption, 17*u); color(caption, dim); wrap(caption, w*0.86);
+
+architecture(collect, (cx, h*0.52), w*0.96, h*0.72);
+
+cluster(sourceData, collect, "SOURCE OF DATA");
+node(core1, sourceData, "gcp:iot-core", "core1");
+node(core2, sourceData, "gcp:iot-core", "core2");
+node(core3, sourceData, "gcp:iot-core", "core3");
+
+node(pubsub, collect, "gcp:pubsub", "pubsub");
+
+cluster(targets, collect, "TARGETS");
+
+cluster(dataFlow, targets, "DATA FLOW");
+node(df, dataFlow, "gcp:dataflow", "data flow");
+
+cluster(dataLake, targets, "DATA LAKE");
+node(bq, dataLake, "gcp:bigquery", "bq");
+node(gcs, dataLake, "gcp:storage", "storage");
+
+cluster(eventDriven, targets, "EVENT DRIVEN");
+
+cluster(processing, eventDriven, "PROCESSING");
+node(engine, processing, "gcp:app-engine", "engine");
+node(bigtable, processing, "gcp:bigtable", "bigtable");
+
+cluster(serverless, eventDriven, "SERVERLESS");
+node(func, serverless, "gcp:functions", "func");
+node(appengine, serverless, "gcp:app-engine", "appengine");
+
+// --- topology ---
+connect(toPubsub, sourceData, pubsub);   // [core1,core2,core3] >> pubsub
+connect(toFlow, pubsub, df);             // pubsub >> flow
+connect(toBq, df, bq);                   // flow >> bq
+connect(toGcs, df, gcs);                 // flow >> storage
+connect(toEngine, df, engine);           // flow >> engine
+connect(engineToBt, engine, bigtable);   // engine >> bigtable
+connect(toFunc, df, func);               // flow >> func
+connect(funcToApp, func, appengine);     // func >> appengine
+
+// --- colour every path by its RELATIONSHIP (cold dashed line + hot overlay) ---
+color(toPubsub, cyan);     color(toPubsub.hot, cyan);
+color(toFlow, cyan);       color(toFlow.hot, cyan);
+color(toBq, gold);         color(toBq.hot, gold);
+color(toGcs, gold);        color(toGcs.hot, gold);
+color(toEngine, magenta);  color(toEngine.hot, magenta);
+color(engineToBt, magenta);color(engineToBt.hot, magenta);
+color(toFunc, lime);       color(toFunc.hot, lime);
+color(funcToApp, lime);    color(funcToApp.hot, lime);
+// legend
+text(legIn, (w*0.22, h*0.175), "INGEST"); size(legIn, 13); color(legIn, cyan); bold(legIn);
+text(legLake, (w*0.36, h*0.175), "DATA LAKE"); size(legLake, 13); color(legLake, gold); bold(legLake);
+text(legProc, (w*0.54, h*0.175), "PROCESSING"); size(legProc, 13); color(legProc, magenta); bold(legProc);
+text(legSls, (w*0.72, h*0.175), "SERVERLESS"); size(legSls, 13); color(legSls, lime); bold(legSls);
+hidden(legIn); hidden(legLake); hidden(legProc); hidden(legSls);
+
+message(msg, pubsub, "msg");
+
+hidden(collect.nodes);
+hidden(sourceData.parts); hidden(targets.parts); hidden(dataFlow.parts);
+hidden(dataLake.parts); hidden(eventDriven.parts); hidden(processing.parts); hidden(serverless.parts);
+hidden(msg.parts);
+untraced(toPubsub); untraced(toFlow); untraced(toBq); untraced(toGcs);
+untraced(toEngine); untraced(engineToBt); untraced(toFunc); untraced(funcToApp);
+
+step("devices") {
+  par {
+    show(sourceData.parts, 0.45);
+    stagger(0.10) { show(core1, 0.35); show(core2, 0.35); show(core3, 0.35); }
+    show(pubsub, 0.40);
+    say(caption, "Three IoT Core devices publish into one Pub/Sub topic.", 0.40);
+  }
+}
+wait(0.20);
+
+step("targets") {
+  par {
+    show(targets.parts, 0.5);
+    show(dataFlow.parts, 0.4); show(df, 0.4);
+    show(dataLake.parts, 0.4); show(bq, 0.4); show(gcs, 0.4);
+    show(eventDriven.parts, 0.4);
+    show(processing.parts, 0.4); show(engine, 0.4); show(bigtable, 0.4);
+    show(serverless.parts, 0.4); show(func, 0.4); show(appengine, 0.4);
+    say(caption, "Dataflow is the hub; targets nest into a data lake, a processing branch, and a serverless branch.", 0.40);
+  }
+}
+wait(0.25);
+
+step("possible-topology") {
+  par {
+    stagger(0.07) {
+      draw(toPubsub, 0.4); draw(toFlow, 0.4); draw(toBq, 0.4); draw(toGcs, 0.4);
+      draw(toEngine, 0.4); draw(engineToBt, 0.4); draw(toFunc, 0.4); draw(funcToApp, 0.4);
+    }
+    show(legIn, 0.3); show(legLake, 0.3); show(legProc, 0.3); show(legSls, 0.3);
+    say(caption, "Every dashed edge is a possible relationship—not a claim that data is flowing.", 0.40);
+  }
+}
+wait(0.30);
+
+step("collect") {
+  par {
+    seq {
+      show(msg.parts, 0.2);
+      route(msg, toFlow, 0.9, smooth);
+    }
+    say(caption, "A published message reaches Dataflow through Pub/Sub.", 0.40);
+  }
+}
+wait(0.25);
+
+step("fan-out") {
+  par {
+    flow(toBq, 1.0); flow(toGcs, 1.0);
+    seq { flow(toEngine, 0.9); flow(engineToBt, 0.9); }
+    seq { flow(toFunc, 0.9); flow(funcToApp, 0.9); }
+    say(caption, "Dataflow fans out: BigQuery + storage (lake), App Engine → Bigtable, and Functions → App Engine.", 0.40);
+  }
+}
+wait(0.30);
+
+step("takeaway") {
+  par {
+    pulse(targets.parts, 0.70);
+    say(caption, "One publish; many destinations—each branch owns its own runtime and storage.", 0.45);
+  }
+}
+wait(1.40);

package/examples/geo-pythagoras-short.manic

@@ -0,0 +1,119 @@
+// geo-pythagoras-short — a SPLIT STAGE: the top third of the frame is a living
+// generative `shader` artwork (domain-warped aurora plasma — pure art, showing off what
+// per-pixel shaders do), and the bottom two-thirds is the most famous theorem in
+// geometry drawn out on black: a 3-4-5 right triangle whose squares bloom to 9 + 16 = 25
+// → a² + b² = c². Two concepts, one frame — the shader and the maths each at full value.
+//
+//   manic examples/geo-pythagoras-short.manic
+title("Why a² + b² = c²");
+canvas("9:16");
+template("black");
+
+creator(me, "@anish2good name=Manic tagline=Turn_plain_text_into_math_videos yt=zarigatongy x=@anish2good web=8gwifi.org/manic accent=cyan secondary=magenta footer=signature cta=Try_it_free safe=reels");
+
+// ===================== TOP STAGE : the shader as ART =====================
+// A bold domain-warped flow field confined to the top band (v < BAND); pure black
+// below it, with a crisp accent rule marking the seam. This is the shader showcase —
+// motion, depth and colour, all one closed-form expression per pixel.
+shader(art) {
+  let band = 0.34;
+  let inside = 1.0 - smoothstep(band - 0.02, band, v);   // 1 in the top band, 0 below
+
+  // domain warp: fold the plane through itself twice for turbulent, liquid flow
+  let x = (u - 0.5) * asp;
+  let y = v / band;                                       // 0 at top → 1 at the seam
+  let w1 = sin(x * 3.0 + t * 0.5) + cos(y * 4.0 - t * 0.3);
+  let w2 = sin((x + w1) * 2.6 - t * 0.4) * cos((y + w1) * 3.2 + t * 0.25);
+  let flow = 0.5 + 0.5 * sin(x * 4.0 + w2 * 2.2 + t * 0.6);
+  let bands = 0.5 + 0.5 * sin(y * 9.0 - w2 * 3.0 + t * 0.5);  // aurora curtains
+
+  let hue = mod(244 + flow * 118 + w2 * 44, 360);         // magenta → cyan aurora
+  let sat = 0.82;
+  let base = (0.14 + 0.62 * flow * bands) * inside;
+
+  // crisp bright accent rule along the seam (the two stages meet here)
+  let rule = smoothstep(0.006, 0.0, abs(v - band));
+  let val = base + rule * 0.85;
+}
+
+// ===================== BOTTOM STAGE : the proof on black =====================
+// geometry of the 3-4-5 right triangle, sized + placed to live entirely below the seam
+let ux = w * 0.070;          // one unit
+let ox = w * 0.36;           // right-angle vertex x
+let oy = h * 0.75;           // right-angle vertex y (well below the art band)
+
+// vertices: C (right angle), A (end of the 4-leg), B (end of the 3-leg)
+point(pC, (ox, oy));
+point(pA, (ox + 4*ux, oy));
+point(pB, (ox, oy - 3*ux));
+hidden(pC); hidden(pA); hidden(pB);
+polygon(tri, (ox, oy), (ox + 4*ux, oy), (ox, oy - 3*ux), cyan);
+rightangle(ra, pA, pC, pB);
+// `untraced` starts a shape drawn-to-0% (opacity stays 1) so `draw` can pen it on —
+// the outline traces edge by edge while the fill washes in.
+untraced(tri); hidden(ra);
+
+// squares on the two legs (areas 16 and 9) and on the hypotenuse (area 25)
+polygon(sqA, (ox, oy), (ox + 4*ux, oy), (ox + 4*ux, oy + 4*ux), (ox, oy + 4*ux), gold);
+polygon(sqB, (ox, oy), (ox, oy - 3*ux), (ox - 3*ux, oy - 3*ux), (ox - 3*ux, oy), lime);
+polygon(sqC, (ox + 4*ux, oy), (ox + 7*ux, oy - 4*ux), (ox + 3*ux, oy - 7*ux), (ox, oy - 3*ux), magenta);
+untraced(sqA); untraced(sqB); untraced(sqC);
+
+// side length labels — on the triangle's own edges (dark ink on the cyan face)
+caption(lb, "3", (ox + 26, oy - 1.5*ux), 32);    color(lb, #06202a);
+caption(la, "4", (ox + 2*ux, oy - 28), 32);       color(la, #06202a);
+caption(lc, "5", (ox + 2.6*ux, oy - 1.9*ux), 32); color(lc, #06202a);
+hidden(la); hidden(lb); hidden(lc);
+
+// area labels, sitting in each square (dark ink on the bright leg-squares, white on the hyp)
+caption(cA, "16", (ox + 2*ux, oy + 2*ux), 44);      color(cA, #101018);
+caption(cB, "9", (ox - 1.5*ux, oy - 1.5*ux), 44);   color(cB, #101018);
+caption(cC, "25", (ox + 3.5*ux, oy - 3.5*ux), 44);  color(cC, white);
+hidden(cA); hidden(cB); hidden(cC);
+
+// the payoff equations — tucked under the diagram, along the bottom edge
+equation(eqn, (w*0.5, h*0.955), `9 + 16 = 25`, 46);   hidden(eqn);
+equation(eq2, (w*0.5, h*0.955), `a^2 + b^2 = c^2`, 46); hidden(eq2);
+
+// hook + point text — in the seam gap between the art band and the diagram
+caption(hook, "Why is this ALWAYS a right triangle?", (w*0.5, h*0.42), 32);
+caption(point, "Every right triangle. Always.", (w*0.5, h*0.42), 34);
+hidden(hook); hidden(point);
+
+// ================= script =================
+show(hook);
+wait(2.4);
+fade(hook, 0.4);
+
+// BUILD — the triangle is DRAWN OUT edge by edge, then the right angle + side labels
+draw(tri, 1.4);
+wait(0.4);
+show(ra);
+wait(0.4);
+show(la); show(lb); show(lc);
+wait(1.2);
+
+// RULE — squares DRAW out on the legs (pen tracing each side), then the areas appear
+draw(sqA, 1.1); draw(sqB, 1.1);
+wait(0.5);
+show(cA); show(cB);
+wait(1.4);
+// then the hypotenuse square draws out — the payoff shape
+draw(sqC, 1.3);
+wait(0.5);
+show(cC);
+wait(1.6);
+
+// TWIST — the two small squares add up to the big one
+pulse(sqA, 1.4); pulse(sqB, 1.4);
+show(eqn);
+wait(1.6);
+pulse(sqC, 1.6);
+fade(eqn, 0.4);
+show(eq2);
+wait(2.0);
+
+// POINT + hold
+show(point);
+wait(2.6);
+endcard(me, "title=Try_Manic cta=8gwifi.org/manic");

package/examples/glsl-boxgrid.manic

@@ -0,0 +1,105 @@
+// glsl-boxgrid — the ACTUAL Shadertoy (tssSDN) that started this whole thread,
+// running in manic UNCHANGED via the `glsl` V3 path. Our CPU rebuild
+// (examples/raymarch-boxgrid.manic) traded resolution for the no-GPU farm; this
+// hands the real fragment shader straight to the graphics pipeline, so it renders
+// PER PIXEL at full resolution — GPU-marched on Mac, JIT-to-CPU on llvmpipe prod,
+// WebGL in the browser. Same shader, three targets. This IS capture.webm.
+//
+// Original shader: https://www.shadertoy.com/view/tssSDN  (ukeyshima)
+//   manic examples/glsl-boxgrid.manic
+canvas("16:9");
+template("black");
+
+glsl(scene, `
+#define MAX_DIST 1000.
+#define SURF_DIST .0001
+#define EPS .0001
+#define PI 3.141592
+#define PI2 PI*2.
+#define REP(p,r) mod(p,r) - r * .5
+
+float rand(vec2 co){ return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453); }
+float sdSphere(vec3 p, float s){ return length(p) - s; }
+float sdBox(vec3 p, vec3 b){ vec3 q = abs(p) - b; return length(max(q, 0.)) + min(max(q.x, max(q.y, q.z)), 0.); }
+vec2 minMat(vec2 d1, vec2 d2){ return (d1.x < d2.x) ? d1 : d2; }
+
+float rep = .04;
+
+vec2 scene(vec3 p){
+  vec2 d = vec2(100000., 0.);
+  float t = iTime;
+  vec3 q = p;
+  vec3 spo = vec3(sin(t * 1.8) * .25, .32, cos(t * 2.2) * .3);
+  vec3 sp = q - spo;
+  d.x = sdSphere(sp, .075);
+  vec2 id = floor(q.xz / rep);
+  float hash = rand(id * .001);
+  q.xz = mod(q.xz, rep) - rep * .5;
+  vec3 bcp = vec3(0.);
+  bcp.xz = id * rep + rep * .5;
+  float bsDist = length(spo.xz - bcp.xz);
+  float s = smoothstep(0., .5, bsDist);
+  q -= vec3(0., .125 - (sin(hash * PI2 + t * (2. + bsDist * .015)) * .05) * (1. - pow(s, .9)), 0.);
+  d = minMat(d, vec2(sdBox(q, vec3(rep * .5, .1, rep * .5)), 1.));
+  return d;
+}
+
+vec3 getNormal(vec3 p){
+  vec2 e = vec2(EPS, 0.);
+  return normalize(vec3(scene(p + e.xyy).x - scene(p - e.xyy).x,
+                        scene(p + e.yxy).x - scene(p - e.yxy).x,
+                        scene(p + e.yyx).x - scene(p - e.yyx).x));
+}
+
+vec2 raymarch(vec3 ro, vec3 rd, float side){
+  float accDist = 0.; float mat = 0.;
+  for(int i = 0; i < 128; i++){
+    vec3 p = ro + rd * accDist;
+    vec2 result = scene(p);
+    float dist = result.x * side;
+    vec3 rdi = 1. / rd;
+    mat = result.y;
+    if(abs(dist) < SURF_DIST || accDist > MAX_DIST) break;
+    accDist += min(min((step(0., rd.x) - mod(p.x, rep)) * rdi.x,
+                       (step(0., rd.z) - mod(p.z, rep)) * rdi.z) + .0001, dist);
+  }
+  return vec2(accDist, mat);
+}
+
+vec3 getRayDir(vec2 uv, vec3 p, vec3 l, float z){
+  vec3 forward = normalize(l - p);
+  vec3 right = normalize(cross(forward, vec3(0., 1., 0.)));
+  vec3 up = normalize(cross(right, forward));
+  return normalize(right * uv.x + up * uv.y + forward * z);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord){
+  float t = iTime;
+  vec2 uv = (fragCoord.xy * 2. - iResolution.xy) / min(iResolution.x, iResolution.y);
+  vec3 ro = vec3(1., 1., 1.2);
+  vec3 ta = vec3(0., .2, 0.);
+  vec3 rd = getRayDir(uv, ro, ta, 3.5);
+  vec2 result = raymarch(ro, rd, 1.);
+  float dist = result.x; float mat = result.y;
+  vec3 col = vec3(0.);
+  if(dist < MAX_DIST){
+    vec3 p = ro + rd * dist;
+    vec3 l = normalize(vec3(1., 1., -1.));
+    vec3 n = getNormal(p);
+    float diffuse = dot(l, n) * .5 + .5;
+    vec3 diffuseColor = vec3(diffuse);
+    if(mat < .5){ diffuseColor *= vec3(1., 0., 0.); }
+    else {
+      diffuseColor *= vec3(1.);
+      if(n.x > .5) diffuseColor = diffuse * vec3(1., 0., 0.);
+      if(n.y > .5) diffuseColor = diffuse * vec3(1., .9, .9);
+      if(n.z > .5) diffuseColor = diffuse * vec3(.6, 0., 0.);
+    }
+    col = diffuseColor;
+  }
+  col = pow(col, vec3(.4545));
+  fragColor = vec4(col, 1.);
+}
+`);
+
+wait(12);

package/examples/glsl-parameter.manic

@@ -0,0 +1,30 @@
+// glsl-parameter — a RAW GLSL shader driven by a scene `parameter`. Step 5 of the
+// shader backbone: `glsl()` is now a full citizen of the uniform table, so a paste
+// that DECLARES `uniform float u_<name>;` auto-binds to the matching `parameter`
+// (and `uniform vec3 iCamEye;` etc. would bind to `camera3`). Here `u_freq` is a
+// slider: the same shader re-renders as you sweep it — no re-paste, no edits.
+//
+//   manic examples/glsl-parameter.manic
+title("A raw GLSL shader, driven by a slider");
+canvas("16:9");
+template("black");
+
+parameter(freq, (640, 660), 3, 1, 16, "freq", 0);
+
+glsl(scene, `
+uniform float u_freq;
+void mainImage(out vec4 o, in vec2 fc){
+  vec2 uv = fc / iResolution;
+  vec2 c = uv - 0.5;
+  c.x *= iResolution.x / iResolution.y;            // aspect-correct
+  float d = length(c);
+  float rings = 0.5 + 0.5 * sin(d * u_freq * 32.0 - iTime);
+  vec3 col = vec3(rings, 1.0 - rings, 0.5 + 0.5 * sin(d * u_freq * 8.0));
+  o = vec4(col, 1.0);
+}
+`);
+
+caption(head, "glsl ← parameter", (640, 66), 34);
+hidden(head);
+show(head);
+to(freq, value, 16, 6, smooth);

package/examples/glsl-raymarch.manic

@@ -0,0 +1,59 @@
+// glsl-raymarch — Shader V3: run a REAL GLSL fragment shader, full resolution.
+// `glsl(id, `<shader>`)` hands a Shadertoy-style `mainImage` straight to the GPU
+// (macroquad material) — so the whole scene is marched PER PIXEL by the graphics
+// pipeline: crisp, anti-aliased, and fast, with `iTime`/`iResolution`/`iMouse`
+// uniforms. The same shader runs on Metal (Mac), llvmpipe (headless prod, JIT to
+// CPU), and WebGL (browser). This is the path to true Shadertoy quality in manic
+// — paste a shader, it just runs.
+//
+//   manic examples/glsl-raymarch.manic
+title("A real GLSL raymarch — full resolution");
+canvas("16:9");
+template("black");
+
+glsl(scene, `
+float sdSphere(vec3 p, float r){ return length(p) - r; }
+float map(vec3 p){
+  vec3 q = p;
+  q.xy = mod(q.xy + 1.0, 2.0) - 1.0;                 // infinite grid
+  float bob = 0.18 * sin(iTime*1.6 + p.x*0.8 + p.y*0.7);
+  return sdSphere(q - vec3(0.0, 0.0, bob), 0.42);
+}
+vec3 nrm(vec3 p){
+  vec2 e = vec2(0.001, 0.0);
+  return normalize(vec3(map(p+e.xyy)-map(p-e.xyy),
+                        map(p+e.yxy)-map(p-e.yxy),
+                        map(p+e.yyx)-map(p-e.yyx)));
+}
+void mainImage(out vec4 o, in vec2 fc){
+  vec2 uv = (fc*2.0 - iResolution)/min(iResolution.x, iResolution.y);
+  vec3 ro = vec3(sin(iTime*0.3)*0.7, cos(iTime*0.25)*0.5, 3.0);
+  vec3 rd = normalize(vec3(uv, -1.6));
+  float t = 0.0; float hit = 0.0;
+  for(int i=0;i<110;i++){
+    vec3 p = ro + rd*t;
+    float d = map(p);
+    if(d < 0.001){ hit = 1.0; break; }
+    t += d;
+    if(t > 24.0) break;
+  }
+  vec3 col = vec3(0.04, 0.05, 0.08);
+  if(hit > 0.5){
+    vec3 p = ro + rd*t;
+    vec3 n = nrm(p);
+    float diff = max(dot(n, normalize(vec3(0.6, 0.8, 0.5))), 0.0)*0.7 + 0.3;
+    vec3 base = 0.5 + 0.5*cos(iTime + p.xyx*0.6 + vec3(0.0, 2.0, 4.0));  // iridescent
+    col = base * diff;
+  }
+  o = vec4(pow(col, vec3(0.4545)), 1.0);
+}
+`);
+
+caption(head, "A real GLSL raymarch", (640, 66), 34);
+caption(sub, "glsl(...) runs a fragment shader per pixel — full res, fast", (640, 122), 22);
+hidden(head);
+hidden(sub);
+show(head);
+wait(1.6);
+show(sub);
+wait(24);