@maniclang/workbench 0.1.11

package/examples/microservices-platform.manic

@@ -0,0 +1,140 @@
+title("A Microservices Platform — Laid Out Automatically");
+canvas("16:9");
+template("neon");
+
+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 · AUTO-FIT · NO COORDINATES");
+text(headline, (cx, h*0.12), "Add a tier. It re-fits itself.");
+text(caption, (cx, h*0.95), "DNS, load balancing, three AZs of services, a database cluster, and monitoring — all auto-laid.");
+size(kicker, 15*u); color(kicker, dim); bold(kicker);
+size(headline, 26*u); bold(headline); wrap(headline, w*0.86);
+size(caption, 17*u); color(caption, dim); wrap(caption, w*0.86);
+
+// No geometry: the diagram auto-fits. Route 53, an edge load balancer, three
+// availability zones, a replicated database cluster and monitoring all reflow
+// to fit — and when the content would overflow, the whole diagram scales down
+// as one. The author types no coordinate.
+architecture(platform);
+
+node(dns, platform, "aws:route53", "route 53");
+node(lb, platform, "aws:elb", "load balancer");
+node(gateway, platform, "aws:api-gateway", "gateway");
+
+cluster(region, platform, "REGION us-east-1");
+cluster(azA, region, "AZ-A");
+node(a1, azA, "aws:ecs", "svc"); node(a2, azA, "aws:ecs", "svc"); node(a3, azA, "aws:ecs", "svc");
+cluster(azB, region, "AZ-B");
+node(b1, azB, "aws:ecs", "svc"); node(b2, azB, "aws:ecs", "svc"); node(b3, azB, "aws:ecs", "svc");
+cluster(azC, region, "AZ-C");
+node(c1, azC, "aws:ecs", "svc"); node(c2, azC, "aws:ecs", "svc"); node(c3, azC, "aws:ecs", "svc");
+
+cluster(database, platform, "DATABASE CLUSTER");
+node(primary, database, "aws:rds", "primary");
+node(replica1, database, "aws:rds", "replica");
+node(replica2, database, "aws:rds", "replica");
+node(cache, database, "aws:elasticache", "cache");
+
+cluster(observability, platform, "MONITORING");
+node(metrics, observability, "aws:cloudwatch", "metrics");
+node(logs, observability, "aws:cloudwatch", "logs");
+node(alarms, observability, "aws:cloudwatch", "alarms");
+
+connect(dnsToLb, dns, lb);        // resolve, then hit the edge load balancer
+connect(lbToGw, lb, gateway);     // balanced across the API gateway
+connect(toA, gateway, azA);       // gateway fans out to each zone's services
+connect(toB, gateway, azB);
+connect(toC, gateway, azC);
+connect(toWrite, a1, primary);    // a representative service writes the primary
+connect(toRead, a1, replica1);    // reads served from a replica
+connect(toCache, a1, cache);
+connect(repl1, primary, replica1); // primary replicates to both replicas
+connect(repl2, primary, replica2);
+connect(toMetrics, b1, metrics);  // services emit telemetry to monitoring
+
+color(dnsToLb, cyan);   color(dnsToLb.hot, cyan);      // request path
+color(lbToGw, cyan);    color(lbToGw.hot, cyan);
+color(toA, cyan);       color(toA.hot, cyan);
+color(toB, cyan);       color(toB.hot, cyan);
+color(toC, cyan);       color(toC.hot, cyan);
+color(toRead, cyan);    color(toRead.hot, cyan);
+color(toCache, cyan);   color(toCache.hot, cyan);
+color(toWrite, magenta); color(toWrite.hot, magenta);  // write path
+color(repl1, lime);     color(repl1.hot, lime);         // replication
+color(repl2, lime);     color(repl2.hot, lime);
+color(toMetrics, gold); color(toMetrics.hot, gold);     // telemetry
+
+request(call, dns, "GET /order");
+
+hidden(platform.nodes);
+hidden(region.parts); hidden(azA.parts); hidden(azB.parts); hidden(azC.parts);
+hidden(database.parts); hidden(observability.parts);
+hidden(call.parts);
+untraced(dnsToLb); untraced(lbToGw);
+untraced(toA); untraced(toB); untraced(toC);
+untraced(toWrite); untraced(toRead); untraced(toCache);
+untraced(repl1); untraced(repl2); untraced(toMetrics);
+
+step("edge") {
+  par {
+    stagger(0.08) { show(dns, 0.4); show(lb, 0.4); show(gateway, 0.4); }
+    say(caption, "Route 53 resolves the name, an edge load balancer spreads the traffic, the gateway takes it from there.", 0.4);
+  }
+}
+wait(0.2);
+
+step("reveal-zones") {
+  par {
+    show(region.parts, 0.4);
+    show(azA.parts, 0.4); stagger(0.05) { show(a1,0.3); show(a2,0.3); show(a3,0.3); }
+    show(azB.parts, 0.4); stagger(0.05) { show(b1,0.3); show(b2,0.3); show(b3,0.3); }
+    show(azC.parts, 0.4); stagger(0.05) { show(c1,0.3); show(c2,0.3); show(c3,0.3); }
+    say(caption, "Three availability zones, each with its own services — nested clusters, auto-laid.", 0.4);
+  }
+}
+wait(0.2);
+
+step("state-and-monitoring") {
+  par {
+    show(database.parts, 0.4); show(primary, 0.4); show(replica1, 0.4); show(replica2, 0.4); show(cache, 0.4);
+    show(observability.parts, 0.4); show(metrics, 0.4); show(logs, 0.4); show(alarms, 0.4);
+    say(caption, "A replicated database cluster and monitoring join in — the whole diagram re-fits.", 0.4);
+  }
+}
+wait(0.25);
+
+step("topology") {
+  par {
+    stagger(0.06) {
+      draw(dnsToLb,0.4); draw(lbToGw,0.4);
+      draw(toA,0.4); draw(toB,0.4); draw(toC,0.4);
+      draw(toWrite,0.4); draw(toRead,0.4); draw(toCache,0.4);
+      draw(repl1,0.4); draw(repl2,0.4); draw(toMetrics,0.4);
+    }
+    say(caption, "Paths coloured by relationship: request cyan, writes magenta, replication lime, telemetry gold.", 0.4);
+  }
+}
+wait(0.3);
+
+step("one-request") {
+  par {
+    seq {
+      show(call.parts, 0.2);
+      route(call, dnsToLb, 0.7, smooth);
+      route(call, lbToGw, 0.7, smooth);
+      route(call, toA, 0.7, smooth);
+      route(call, toWrite, 0.7, smooth);
+    }
+    say(caption, "One order: Route 53 → load balancer → gateway → an AZ-A service → the primary database.", 0.4);
+  }
+}
+wait(0.3);
+
+step("takeaway") {
+  par {
+    pulse(region.parts, 0.7);
+    pulse(database.parts, 0.7);
+    say(caption, "Add a tier, a zone, a replica — you never touch a coordinate. That is manic.", 0.45);
+  }
+}
+wait(1.4);

package/examples/molecule.manic

@@ -0,0 +1,8 @@
+// molecule.manic — atoms bonded by springs, vibrating about their shape.
+title("Vibrating molecule");
+canvas("16:9");
+text(hdr,(cx,46),"A molecule as balls and springs — bonds stretch and the atoms jiggle"); size(hdr,22); color(hdr,cyan); bold(hdr); display(hdr);
+molecule(mol, (520, 300), 3);
+energygraph(mol, (1000, 300), 110);   // total energy is conserved as it vibrates
+text(cap,(cx,h-32),"one atom starts pulled out; the bonds pull it back and the whole thing rings"); size(cap,15); color(cap,dim); display(cap);
+run(mol, 11);

package/examples/morph-icons.manic

@@ -0,0 +1,29 @@
+// morph-icons.manic — morph imported SVG vectors from one shape into another.
+//
+// `morph(a, b)` samples both outlines and blends `a` into `b`'s shape; drive it
+// with `to(a, morph, 1, dur)`. It now works on imported `svg()` art: a bare svg
+// tag resolves to its dominant path, filled Regions sample along their outer ring,
+// and the two loops are winding-matched + rotated for a clean shape-to-shape blend
+// (no tangle through the centre). Here one emoji reshapes into another and back.
+//
+//   manic examples/morph-icons.manic
+title("Morph — imported vectors reshape");
+canvas("16:9");
+template("blank");
+
+svg(heart, (cx, cy), "asset:svg/emoji/heart.svg", 260);
+svg(star,  (cx, cy), "asset:svg/emoji/star.svg", 260); hidden(star);
+
+text(cap, (cx, h*0.86), "morph(heart, star) — one imported icon reshapes into another");
+size(cap, 24); color(cap, dim); display(cap);
+
+// set the heart up to morph into the star's outline
+morph(heart, star);
+
+seq {
+  wait(0.5);
+  par { to(heart, morph, 1, 1.6, smooth); to(heart, color, gold, 1.6); }
+  wait(0.5);
+  par { to(heart, morph, 0, 1.6, smooth); to(heart, color, magenta, 1.6); }
+  wait(0.5);
+}

package/examples/morph.manic

@@ -0,0 +1,29 @@
+// Shape Morph — a circle's outline blends smoothly into a square's and back
+// (Manim's Transform). `morph(a, b)` samples both outlines to the same number
+// of points; `to(a, morph, t)` interpolates between them (t = 0 is `a`'s shape,
+// 1 is `b`'s).
+//
+//   manic examples/morph.manic
+
+title("Shape Morph");
+canvas("16:9");
+
+text(head, (cx, 110), "a circle becomes a square -- and back");
+display(head);  color(head, cyan);  size(head, 26);  hidden(head);
+
+circle(sh, (cx, cy), 150);  color(sh, cyan);  stroke(sh, 5);  glow(sh, 1.6);  hidden(sh);
+rect(target, (cx, cy), 290, 290);  hidden(target);   // defines the square outline
+morph(sh, target);                                    // set sh up to morph into it
+
+// --- script ---
+show(head, 0.5);
+show(sh, 0.6);
+wait(0.5);
+
+section("Morph");
+to(sh, morph, 1, 1.6, smooth);      // circle -> square
+wait(0.7);
+to(sh, morph, 0, 1.6, smooth);      // square -> circle
+wait(0.7);
+to(sh, morph, 1, 1.1, overshoot);   // and back, with a bounce
+wait(1.4);

package/examples/morph3.manic

@@ -0,0 +1,49 @@
+// 3D morphing (morph3) — set a 3D entity up to become another shape, then
+// blend with `to(id, morph, 1, dur)`. Works across three families:
+//   • solids  — a cube becomes a sphere (reparameterised spherically)
+//   • surfaces — a rippling saddle settles into a bowl (filled + shaded)
+//   • curves  — a helix unwinds into a flat ring
+//
+//   manic examples/morph3.manic
+//   manic examples/morph3.manic --record out --fps 60
+
+title("3D morph");
+canvas("16:9");
+template("terminal");
+
+camera3((11, -13, 8), (0, 0, 0.8), 42);
+grid3(floor, (0, 0, 0), 7, 1);
+color(floor, dim);
+
+// solid: cube -> sphere
+cube3(box, (-5, 0, 1.4), (2.4, 2.4, 2.4));
+color(box, cyan);
+sphere3(ball, (0, 0, 0), 1.5);
+hidden(ball);
+morph3(box, ball);
+
+// surface: rippling saddle -> smooth bowl
+surface3(saddle, "0.8*sin(x*1.3)*cos(y*1.3)", (-2.3, 2.3), (-2.3, 2.3), 24);
+color(saddle, gold);
+surface3(bowl, "0.16*(x*x + y*y) - 1", (-2.3, 2.3), (-2.3, 2.3), 24);
+hidden(bowl);
+morph3(saddle, bowl);
+
+// curve: helix -> flat ring
+curve3(helix, "5 + 1.5*cos(t)", "1.5*sin(t)", "0.2*t", (0, 18));
+color(helix, magenta);
+thick(helix, 0.06);
+curve3(ring, "5 + 1.5*cos(t)", "1.5*sin(t)", "1.8", (0, 6.283));
+hidden(ring);
+morph3(helix, ring);
+
+show(floor, 0.3);
+par { show(box, 0.5); show(saddle, 0.5); show(helix, 0.5); }
+wait(0.7);
+par {
+  to(box, morph, 1, 3.0, smooth);
+  to(saddle, morph, 1, 3.0, smooth);
+  to(helix, morph, 1, 3.0, smooth);
+  orbit3(48, 25, 21, 3.0, smooth);
+}
+wait(0.8);

package/examples/motion-flow-foundation.manic

@@ -0,0 +1,148 @@
+// motion-flow-foundation.manic — objects, paths, timing, and composition
+
+title("Motion Flow Foundation — The Creator Decides");
+canvas("9:16");
+template("mono");
+let u = (w+h-abs(w-h))/2160;
+let left = w*0.17;
+let right = w*0.83;
+let upper = h*0.36;
+let middle = h*0.48;
+let lower = h*0.60;
+watermark(manicMark, (w*0.15, h*0.06), "Made With Manic");
+
+text(kicker, (cx, h*0.06), "MANIC · DOMAIN-NEUTRAL MOTION");
+text(headline, (cx, h*0.13), "The path has no meaning until you give it one.");
+text(mode, (cx, h*0.20), "ONE OBJECT · ONE SELECTED PATH");
+text(caption, (cx, h*0.82), "Three relationships are possible. The creator activates only the middle path.");
+size(kicker, 21*u); color(kicker, dim); bold(kicker);
+size(headline, 36*u); bold(headline); wrap(headline, w*0.82);
+size(mode, 25*u); color(mode, cyan); bold(mode);
+size(caption, 24*u); color(caption, dim); wrap(caption, w*0.80);
+
+rect(stage, (cx, h*0.49), w*0.88, h*0.56);
+color(stage, panel); outline(stage, dim); opacity(stage, 0.72);
+
+// Scene 1: one authored object chooses one authored route.
+line(cold1a, (left,middle), (right,upper)); dashed(cold1a); color(cold1a, dim); stroke(cold1a, 3*u);
+line(cold1b, (left,middle), (right,middle)); dashed(cold1b); color(cold1b, dim); stroke(cold1b, 3*u);
+line(cold1c, (left,middle), (right,lower)); dashed(cold1c); color(cold1c, dim); stroke(cold1c, 3*u);
+line(hot1b,  (left,middle), (right,middle)); color(hot1b, cyan); stroke(hot1b, 7*u); untraced(hot1b);
+circle(choiceA, (right,upper), 32*u); outlined(choiceA); color(choiceA, dim); stroke(choiceA, 3*u);
+circle(choiceB, (right,middle), 32*u); outlined(choiceB); color(choiceB, cyan); stroke(choiceB, 4*u);
+circle(choiceC, (right,lower), 32*u); outlined(choiceC); color(choiceC, dim); stroke(choiceC, 3*u);
+rect(parcel, (left,middle), 34*u,34*u); color(parcel, gold); glow(parcel, 1.5);
+tag(cold1a, scene1); tag(cold1b, scene1); tag(cold1c, scene1); tag(hot1b, scene1);
+tag(choiceA, scene1); tag(choiceB, scene1); tag(choiceC, scene1); tag(parcel, scene1);
+
+// Scene 2: the creator makes the same three routes active in sequence.
+line(cold2a, (left,middle), (right,upper)); dashed(cold2a); color(cold2a, dim); stroke(cold2a, 3*u); hidden(cold2a);
+line(cold2b, (left,middle), (right,middle)); dashed(cold2b); color(cold2b, dim); stroke(cold2b, 3*u); hidden(cold2b);
+line(cold2c, (left,middle), (right,lower)); dashed(cold2c); color(cold2c, dim); stroke(cold2c, 3*u); hidden(cold2c);
+line(hot2a,  (left,middle), (right,upper)); color(hot2a, cyan); stroke(hot2a, 7*u); untraced(hot2a);
+line(hot2b,  (left,middle), (right,middle)); color(hot2b, cyan); stroke(hot2b, 7*u); untraced(hot2b);
+line(hot2c,  (left,middle), (right,lower)); color(hot2c, cyan); stroke(hot2c, 7*u); untraced(hot2c);
+circle(roundA, (right,upper), 32*u); outlined(roundA); color(roundA, dim); stroke(roundA, 3*u); hidden(roundA);
+circle(roundB, (right,middle), 32*u); outlined(roundB); color(roundB, dim); stroke(roundB, 3*u); hidden(roundB);
+circle(roundC, (right,lower), 32*u); outlined(roundC); color(roundC, dim); stroke(roundC, 3*u); hidden(roundC);
+circle(r1, (left,middle), 13*u); color(r1, gold); hidden(r1);
+rect(r2, (left,middle), 25*u,25*u); color(r2, magenta); hidden(r2);
+text(r3, (left,middle), "◆"); size(r3, 34*u); color(r3, cyan); hidden(r3);
+tag(cold2a, scene2structure); tag(cold2b, scene2structure); tag(cold2c, scene2structure);
+tag(roundA, scene2structure); tag(roundB, scene2structure); tag(roundC, scene2structure);
+tag(cold2a, scene2); tag(cold2b, scene2); tag(cold2c, scene2);
+tag(hot2a, scene2); tag(hot2b, scene2); tag(hot2c, scene2);
+tag(roundA, scene2); tag(roundB, scene2); tag(roundC, scene2);
+tag(r1, scene2); tag(r2, scene2); tag(r3, scene2);
+
+// Scene 3: parallel composition makes every authored route active.
+line(cold3a, (left,middle), (right,upper)); dashed(cold3a); color(cold3a, dim); stroke(cold3a, 3*u); hidden(cold3a);
+line(cold3b, (left,middle), (right,middle)); dashed(cold3b); color(cold3b, dim); stroke(cold3b, 3*u); hidden(cold3b);
+line(cold3c, (left,middle), (right,lower)); dashed(cold3c); color(cold3c, dim); stroke(cold3c, 3*u); hidden(cold3c);
+line(hot3a,  (left,middle), (right,upper)); color(hot3a, cyan); stroke(hot3a, 7*u); untraced(hot3a);
+line(hot3b,  (left,middle), (right,middle)); color(hot3b, magenta); stroke(hot3b, 7*u); untraced(hot3b);
+line(hot3c,  (left,middle), (right,lower)); color(hot3c, gold); stroke(hot3c, 7*u); untraced(hot3c);
+circle(allA, (right,upper), 32*u); outlined(allA); color(allA, cyan); stroke(allA, 4*u); hidden(allA);
+circle(allB, (right,middle), 32*u); outlined(allB); color(allB, magenta); stroke(allB, 4*u); hidden(allB);
+circle(allC, (right,lower), 32*u); outlined(allC); color(allC, gold); stroke(allC, 4*u); hidden(allC);
+circle(b1, (left,middle), 13*u); color(b1, cyan); hidden(b1);
+rect(b2, (left,middle), 25*u,25*u); color(b2, magenta); hidden(b2);
+text(b3, (left,middle), "◆"); size(b3, 34*u); color(b3, gold); hidden(b3);
+tag(cold3a, scene3structure); tag(cold3b, scene3structure); tag(cold3c, scene3structure);
+tag(allA, scene3structure); tag(allB, scene3structure); tag(allC, scene3structure);
+tag(cold3a, scene3); tag(cold3b, scene3); tag(cold3c, scene3);
+tag(hot3a, scene3); tag(hot3b, scene3); tag(hot3c, scene3);
+tag(allA, scene3); tag(allB, scene3); tag(allC, scene3);
+tag(b1, scene3); tag(b2, scene3); tag(b3, scene3);
+
+// Scene 4: this curve connects nothing. It exists only because the design wants motion.
+spline(ribbon, (w*0.11,h*0.57), (w*0.24,h*0.38), (w*0.40,h*0.55), (w*0.59,h*0.34), (w*0.88,h*0.49));
+color(ribbon, magenta); stroke(ribbon, 8*u); untraced(ribbon); tag(ribbon, scene4);
+hidden(ribbon.knots);
+circle(spark1, (w*0.24,h*0.37), 8*u); color(spark1, cyan); hidden(spark1); tag(spark1, scene4);
+circle(spark2, (w*0.73,h*0.53), 8*u); color(spark2, gold); hidden(spark2); tag(spark2, scene4);
+
+step("select-one") {
+  par {
+    draw(hot1b, 1.65, smooth);
+    flow(hot1b, 1.65);
+    travel(parcel, hot1b, 1.65, smooth);
+  }
+}
+wait(0.55);
+
+step("creator-orders-the-motion") {
+  seq {
+    fade(scene1, 0.35);
+    par {
+      show(scene2structure, 0.40);
+      say(mode, "THREE OBJECTS · CREATOR-AUTHORED ORDER", 0.35);
+      say(caption, "Nothing inferred round robin. The creator simply places three motions in seq.", 0.40);
+    }
+    par { show(r1, 0.15); draw(hot2a, 0.75, smooth); flow(hot2a, 0.75); travel(r1, hot2a, 0.75, smooth); }
+    par { show(r2, 0.15); draw(hot2b, 0.75, smooth); flow(hot2b, 0.75); travel(r2, hot2b, 0.75, smooth); }
+    par { show(r3, 0.15); draw(hot2c, 0.75, smooth); flow(hot2c, 0.75); travel(r3, hot2c, 0.75, smooth); }
+  }
+}
+wait(0.55);
+
+step("creator-sends-together") {
+  seq {
+    fade(scene2, 0.35);
+    par {
+      show(scene3structure, 0.40);
+      show(b1, 0.20); show(b2, 0.20); show(b3, 0.20);
+      say(mode, "THREE OBJECTS · THREE PATHS · TOGETHER", 0.35);
+      say(caption, "Nothing inferred broadcast. par makes every authored journey happen together.", 0.40);
+    }
+    par {
+      draw(hot3a, 1.40, smooth); flow(hot3a, 1.40); travel(b1, hot3a, 1.40, smooth);
+      draw(hot3b, 1.40, smooth); flow(hot3b, 1.40); travel(b2, hot3b, 1.40, smooth);
+      draw(hot3c, 1.40, smooth); flow(hot3c, 1.40); travel(b3, hot3c, 1.40, smooth);
+    }
+  }
+}
+wait(0.55);
+
+step("motion-can-just-be-design") {
+  seq {
+    fade(scene3, 0.35);
+    par {
+      say(mode, "NO ENDPOINTS · NO DOMAIN · JUST MOTION", 0.35);
+      say(caption, "A free curve can carry light in both directions because the composition asks for it.", 0.40);
+      show(spark1, 0.25); show(spark2, 0.25);
+      draw(ribbon, 0.80, smooth);
+    }
+    flow(ribbon, 4.20, both, continuous);
+  }
+}
+wait(1.25);
+
+step("foundation") {
+  par {
+    pulse(ribbon, 0.75);
+    say(mode, "OBJECTS · PATHS · MOTION · TIMING", 0.35);
+    say(caption, "Manic animates the creator's declaration. It never invents the subject's behavior.", 0.45);
+  }
+}
+wait(1.40);

package/examples/motion-graphics-v2-story.manic

@@ -0,0 +1,189 @@
+// motion-graphics-v2-story.manic — one idea, one continuous motion story
+
+title("The Journey of an Idea — Motion Graphics V2 Story");
+canvas("9:16");
+template("mono");
+watermark(manicMark, (170, 178), "Made With Manic");
+
+creator(me, "@anish2good name=Manic_Motion tagline=Move_the_idea yt=zarigatongy x=@anish2good web=8gwifi.org/manic accent=cyan secondary=magenta footer=social cta=Create_yours safe=reels");
+socials(me);
+
+// ---------------------------------------------------------------------------
+// ONE PERSISTENT STAGE
+// The scene never cuts away. Each act reuses what the previous act established.
+// ---------------------------------------------------------------------------
+
+text(kicker, (540, 184), "A MOTION GRAPHICS STORY");
+size(kicker, 22); color(kicker, dim); bold(kicker); hidden(kicker);
+
+text(headline, (540, 248), "How an idea learns to move");
+size(headline, 42); bold(headline); hidden(headline);
+
+text(chapter, (540, 316), "ACT 1 · FOLLOW ATTENTION");
+size(chapter, 24); color(chapter, cyan); bold(chapter); hidden(chapter);
+
+rect(stage, (540, 850), 900, 990);
+color(stage, panel); outline(stage, dim); opacity(stage, 0.76);
+
+text(narration, (540, 1400), "A question appears before the answer does.");
+size(narration, 28); color(narration, fg); wrap(narration, 820); hidden(narration);
+
+text(principle, (540, 1495), "Motion should guide the eye, preserve meaning, then settle.");
+size(principle, 22); color(principle, dim); wrap(principle, 820); hidden(principle);
+
+// ---------------------------------------------------------------------------
+// ACT 1 — CURIOSITY TRAVELS; ITS CONTEXT FOLLOWS
+// ---------------------------------------------------------------------------
+
+spline(questionPath, (175, 1080), (290, 980), (385, 1060), (490, 900), (540, 790));
+color(questionPath, cyan); stroke(questionPath, 5); dashed(questionPath, 18, 15);
+glow(questionPath, 0.8); untraced(questionPath);
+
+dot(idea, (175, 1080), 12);
+color(idea, gold); glow(idea, 1.7); hidden(idea);
+
+text(focusLabel, (175, 1024), "WHY?");
+size(focusLabel, 29); color(focusLabel, gold); bold(focusLabel); hidden(focusLabel);
+
+// Facts begin as visual noise. They persist through every later arrangement.
+rect(noiseField, (540, 820), 690, 470); hidden(noiseField);
+particles(facts, noiseField, 16, 7, 29, "random");
+color(facts, cyan); glow(facts, 0.9); hidden(facts);
+
+for i in 0..16 {
+  tag(facts.p{i}, knowledgeSystem);
+}
+
+// ---------------------------------------------------------------------------
+// ACT 2 — THE SAME QUESTION BECOMES A MODEL
+// ---------------------------------------------------------------------------
+
+equation(work, (540, 1195), `1+2+\cdots+n=?`, 43);
+color(work, fg); hidden(work);
+
+// Hidden entities are visual blueprints. `idea` adopts this exact final state.
+rect(modelBlueprint, (540, 790), 116, 116);
+outlined(modelBlueprint); outline(modelBlueprint, magenta); stroke(modelBlueprint, 7);
+rot(modelBlueprint, 45); glow(modelBlueprint, 1.5); hidden(modelBlueprint);
+
+circle(knowledgeOrbit, (540, 790), 250); hidden(knowledgeOrbit);
+
+text(observe, (540, 492), "OBSERVE");
+text(connect, (842, 790), "CONNECT");
+text(testIdea, (540, 1088), "TEST");
+text(explain, (238, 790), "EXPLAIN");
+
+size(observe, 20); size(connect, 20); size(testIdea, 20); size(explain, 20);
+color(observe, dim); color(connect, dim); color(testIdea, dim); color(explain, dim);
+bold(observe); bold(connect); bold(testIdea); bold(explain);
+hidden(observe); hidden(connect); hidden(testIdea); hidden(explain);
+tag(observe, knowledgeSystem); tag(connect, knowledgeSystem);
+tag(testIdea, knowledgeSystem); tag(explain, knowledgeSystem);
+
+// ---------------------------------------------------------------------------
+// ACT 3 — THE MODEL BECOMES A COORDINATED SYSTEM
+// ---------------------------------------------------------------------------
+
+text(systemLabel, (540, 648), "ONE IDEA · MANY RELATIONSHIPS");
+size(systemLabel, 22); color(systemLabel, magenta); bold(systemLabel); hidden(systemLabel);
+
+text(finalLine, (540, 1320), "Don't animate layers. Animate the relationship.");
+size(finalLine, 30); color(finalLine, fg); bold(finalLine); wrap(finalLine, 820); hidden(finalLine);
+
+// ---------------------------------------------------------------------------
+// TIMELINE — seq tells the story; par and stagger control the viewing rhythm.
+// ---------------------------------------------------------------------------
+
+step("a-question-pulls-attention") {
+  seq {
+    par {
+      show(kicker, 0.35);
+      show(headline, 0.55);
+      show(chapter, 0.40);
+      show(narration, 0.45);
+      show(principle, 0.45);
+      show(idea, 0.30);
+    }
+
+    // Stagger turns a cloud into a readable arrival instead of one visual shock.
+    stagger(0.035) {
+      for i in 0..16 {
+        show(facts.p{i}, 0.22);
+      }
+    }
+
+    attach(focusLabel, idea, (0,-56));
+    par {
+      show(focusLabel, 0.30);
+      draw(questionPath, 2.65, smooth);
+      travel(idea, questionPath, 2.65, smooth);
+      flow(questionPath, 1.45);
+      wander(facts, 2.65);
+    }
+
+    par {
+      to(idea, scale, 1.55, 0.45, out);
+      say(narration, "Attention follows the question while the background stays alive.", 0.45);
+    }
+    wait(0.55);
+  }
+}
+
+step("the-question-becomes-a-model") {
+  seq {
+    attach(focusLabel, none);
+    par {
+      fade(focusLabel, 0.30);
+      fade(questionPath, 0.45);
+      say(chapter, "ACT 2 · PRESERVE THE IDEA", 0.35);
+      say(narration, "The question changes form, but it never loses its identity.", 0.45);
+      show(work, 0.40);
+    }
+
+    // Existing notation moves only where the mathematical meaning changes.
+    rewrite(work, `1+2+\cdots+n=\frac{n(n+1)}{2}`, 1.00, smooth);
+
+    par {
+      become(idea, modelBlueprint, 1.05, smooth);
+      arrange(facts, knowledgeOrbit, "ring", 1.20, smooth);
+      say(principle, "become keeps one id · arrange keeps every particle", 0.45);
+    }
+
+    // spin is local: the new model turns around its own centre.
+    spin(idea, 90, 0.65, out);
+
+    stagger(0.10) {
+      show(observe, 0.30);
+      show(connect, 0.30);
+      show(testIdea, 0.30);
+      show(explain, 0.30);
+    }
+    wait(0.55);
+  }
+}
+
+step("relationships-move-as-one") {
+  seq {
+    attach(systemLabel, idea, (0,-142));
+    par {
+      show(systemLabel, 0.35);
+      say(chapter, "ACT 3 · MOVE THE SYSTEM", 0.35);
+      say(narration, "Now every part can move together without losing the structure.", 0.45);
+      show(finalLine, 0.45);
+    }
+
+    // turn is relational: particles and labels share one pivot and one motion.
+    par {
+      turn(knowledgeSystem, idea, 45, 1.20, smooth);
+      spin(idea, -135, 1.20, smooth);
+      to(facts, color, lime, 1.20, smooth);
+      rewrite(work, `\text{question}\;\longrightarrow\;\text{model}\;\longrightarrow\;\text{insight}`, 1.20, smooth);
+    }
+
+    par {
+      pulse(idea, 0.70);
+      say(principle, "FOLLOW · TRANSFORM · COORDINATE · SETTLE", 0.45);
+    }
+    wait(1.80);
+  }
+}

package/examples/motion-graphics-v2.manic

@@ -0,0 +1,81 @@
+// motion-graphics-v2.manic — relationships, identity, and a deliberate settle
+
+title("Motion Graphics V2 — Follow, Become, Turn");
+canvas("9:16");
+template("mono");
+watermark(manicMark, (150, 132), "Made With Manic");
+
+creator(me, "@anish2good name=Manic_Motion tagline=Describe_the_relationship yt=zarigatongy x=@anish2good web=8gwifi.org/manic accent=cyan secondary=magenta footer=social cta=Create_yours safe=reels");
+socials(me);
+
+text(kicker, (540, 155), "MOTION GRAPHICS V2");
+size(kicker, 23); color(kicker, dim); bold(kicker);
+text(headline, (540, 228), "Move the idea, not every coordinate");
+size(headline, 40); bold(headline);
+text(subhead, (540, 292), "attach · become · turn");
+size(subhead, 25); color(subhead, dim);
+
+rect(stage, (540, 865), 900, 1020);
+color(stage, panel); outline(stage, dim); opacity(stage, 0.78);
+
+// One authored route and one persistent object.
+plot(route, (205, 1040), 172, 190, "0.55*sin(1.2*x)+0.18*x", (0, 4.25));
+color(route, cyan); stroke(route, 6); untraced(route);
+
+dot(marker, (205, 1040), 12);
+color(marker, gold); glow(marker, 1.6);
+text(markerLabel, (205, 994), "one persistent object");
+size(markerLabel, 24); color(markerLabel, fg); hidden(markerLabel);
+
+// A hidden target is a visual blueprint; it never appears as a second object.
+circle(nodeBlueprint, (935, 885), 56);
+color(nodeBlueprint, magenta); outlined(nodeBlueprint); stroke(nodeBlueprint, 7);
+glow(nodeBlueprint, 1.2); hidden(nodeBlueprint);
+
+// Supporting particles begin offstage, then arrive as an ordered ring.
+rect(seedBox, (540, 610), 260, 180); hidden(seedBox);
+particles(sparks, seedBox, 14, 7, 42, "random");
+color(sparks, cyan); hidden(sparks);
+circle(finalOrbit, (935, 885), 138); hidden(finalOrbit);
+
+text(explain, (540, 1325), "The label follows because the relationship is authored.");
+size(explain, 26); color(explain, dim); wrap(explain, 800); hidden(explain);
+
+step("attach-and-travel") {
+  seq {
+    attach(markerLabel, marker, (0,-46));
+    par {
+      show(markerLabel, 0.35);
+      show(explain, 0.40);
+      draw(route, 2.8, smooth);
+      travel(marker, route, 2.8, smooth);
+    }
+    wait(0.45);
+  }
+}
+
+step("become-the-next-idea") {
+  seq {
+    par {
+      become(marker, nodeBlueprint, 1.05, smooth);
+      say(markerLabel, "same id · new visual state", 0.45);
+      say(explain, "become preserves identity and settles on the exact blueprint.", 0.45);
+    }
+    wait(0.50);
+  }
+}
+
+step("release-arrange-turn") {
+  seq {
+    attach(markerLabel, none);
+    par {
+      fade(markerLabel, 0.35);
+      fade(route, 0.45);
+      show(sparks, 0.30);
+      arrange(sparks, finalOrbit, "ring", 1.15, smooth);
+      say(explain, "Release the label. Arrange a system. Turn it around one pivot.", 0.45);
+    }
+    turn(sparks, marker, 24, 0.65, out);
+    wait(1.40);
+  }
+}