@maniclang/workbench 0.1.11

package/examples/story-dependent-chain-history.manic

@@ -0,0 +1,56 @@
+title("How Rotations Become a Drawing");
+canvas("9:16");
+template("blank");
+
+watermark(mark, (w*0.16, h*0.055), "Made With Manic");
+text(kicker, (cx, h*0.085), "ENGINE FOUNDATION · DEPENDENT CHAINS");
+text(headline, (cx, h*0.13), "A drawing can hide inside rotating links");
+text(caption, (cx, h*0.83), "Each endpoint begins where the previous endpoint finishes.");
+size(kicker,20); color(kicker,dim); bold(kicker); hidden(kicker);
+size(headline,34); bold(headline); wrap(headline,w*0.84); hidden(headline);
+size(caption,22); color(caption,dim); wrap(caption,w*0.80); hidden(caption);
+
+camera3((0,-18,13),(0,0,0),46);
+collection3(harmonics,(0,0,0),7,(0,0,0),7,0.10);
+links3(arms,harmonics,chain);
+trail3(memory,harmonics,6,0.035);
+child3(tip,harmonics,6,0.14);
+color(harmonics,cyan);
+color(arms,magenta);
+color(memory,gold);
+color(tip,gold);
+hidden(harmonics); hidden(arms); hidden(memory); hidden(tip);
+
+step("question") {
+  show(kicker,0.35);
+  show(headline,0.45);
+  show(caption,0.40);
+}
+wait(0.35);
+
+step("build-the-chain") {
+  par {
+    show(harmonics,0.55);
+    show(arms,0.65);
+    show(memory,0.45);
+    show(tip,0.45);
+    cue(tick);
+    say(caption,"Seven stable links share one generated dependency chain.",0.40);
+  }
+}
+wait(0.30);
+
+step("remember-the-tip") {
+  par {
+    chain3(harmonics,"2.2 1.1 0.72 0.52 0.40 0.32 0.26","1 -3 5 -7 9 -11 13",8.0);
+    say(caption,"Only the moving tip writes history; the rest remain a readable mechanism.",0.45);
+  }
+}
+wait(0.45);
+
+step("takeaway") {
+  cue(chime);
+  pulse(tip,0.7);
+  say(caption,"The same foundation serves epicycles, linkages, robot arms, and live derived plots.",0.45);
+}
+wait(1.2);

package/examples/story-living-dependency-cloud.manic

@@ -0,0 +1,50 @@
+title("The Dependency Cloud That Refuses to Freeze");
+canvas("9:16");
+template("paper");
+
+watermark(mark, (w*0.16, h*0.055), "Made With Manic");
+text(kicker, (cx, h*0.085), "ENGINE FOUNDATION · BATCHED RELATIONSHIPS");
+text(headline, (cx, h*0.13), "Can 180 dependencies move as one idea?");
+text(caption, (cx, h*0.82), "One collection. Stable children. Every relationship stays truthful.");
+size(kicker, 20); color(kicker, dim); bold(kicker); hidden(kicker);
+size(headline, 34); bold(headline); wrap(headline, w*0.82); hidden(headline);
+size(caption, 22); color(caption, dim); wrap(caption, w*0.78); hidden(caption);
+
+camera3((14,-20,13),(0,0,0),46);
+collection3(services,(0,0,0),180,(4.2,2.6,2.2),41,0.055);
+links3(dependencies,services,nearest,2);
+color(services,cyan);
+color(dependencies,dim);
+hidden(services);
+hidden(dependencies);
+
+step("the-problem") {
+  show(kicker,0.35);
+  show(headline,0.45);
+  show(caption,0.40);
+}
+wait(0.45);
+
+step("the-system-awakens") {
+  par {
+    show(services,0.65);
+    show(dependencies,0.85);
+    say(caption,"The engine batches the repeated geometry but preserves every indexed identity.",0.45);
+  }
+}
+wait(0.35);
+
+step("relationships-remain-live") {
+  par {
+    drift3(services,6.0,0.42);
+    orbit3(35,24,28.0,6.0,smooth);
+    say(caption,"As the nodes drift, the nearest-neighbour graph is derived again from the same state.",0.45);
+  }
+}
+wait(0.45);
+
+step("takeaway") {
+  pulse(services,0.7);
+  say(caption,"Large dependency scenes become one creator intention—not hundreds of scripts.",0.45);
+}
+wait(1.2);

package/examples/story-time-varying-field3.manic

@@ -0,0 +1,57 @@
+title("The Current Changes While We Travel");
+canvas("9:16");
+template("blank");
+
+watermark(mark, (w*0.16, h*0.055), "Made With Manic");
+text(kicker, (cx, h*0.085), "ENGINE FOUNDATION · LIVE 3D FIELDS");
+text(headline, (cx, h*0.13), "What if the current changes mid-flight?");
+text(caption, (cx, h*0.83), "The arrows and particles sample the same field at the same story time.");
+size(kicker,20); color(kicker,dim); bold(kicker); hidden(kicker);
+size(headline,34); bold(headline); wrap(headline,w*0.84); hidden(headline);
+size(caption,22); color(caption,dim); wrap(caption,w*0.80); hidden(caption);
+
+camera3((16,-20,14),(0,0,0),46);
+vectorfield3(current,(0,0,0),(4.2,3.2,2.6),"-y + 0.7*sin(p*tau)","x + 0.35*cos(p*tau)","0.45*sin(z+p*tau)",6);
+collection3(tracers,(0,0,0),90,(2.5,1.8,1.5),73,0.065);
+child3(hero,tracers,0,0.14);
+trail3(route,tracers,0,0.032);
+color(current,dim);
+color(tracers,cyan);
+color(hero,gold);
+color(route,gold);
+hidden(current); hidden(tracers); hidden(hero); hidden(route);
+
+step("question") {
+  show(kicker,0.35);
+  show(headline,0.45);
+  show(caption,0.40);
+}
+wait(0.35);
+
+step("reveal-the-current") {
+  par {
+    show(current,0.70);
+    show(tracers,0.55);
+    show(hero,0.45);
+    show(route,0.45);
+    say(caption,"A bounded formula declares x, y, z and normalized time p.",0.40);
+  }
+}
+wait(0.30);
+
+step("flow-and-follow") {
+  followshot3(hero,(0,0,0.15));
+  par {
+    advect3(tracers,current,7.0,1.15);
+    orbit3(55,26,29.0,7.0,smooth);
+    say(caption,"Deterministic RK4 moves every tracer while the camera follows one stable child.",0.45);
+  }
+  followshot3(none);
+}
+wait(0.45);
+
+step("takeaway") {
+  cue(chime);
+  say(caption,"Field, motion, trail, and shot now tell one synchronized truth.",0.45);
+}
+wait(1.2);

package/examples/story.manic

@@ -0,0 +1,4 @@
+title("story");
+canvas("16:9");
+
+// Build your story here.

package/examples/string-art-breath.manic

@@ -0,0 +1,70 @@
+// string-art-breath — a breathing string-art caustic (the "eye"), with an arc.
+//
+// 190 straight chords join point i to point 2i; their envelope is a cardioid
+// caustic — an "eye" — and `link` keeps each string on its two anchors. Winding an
+// anchor by an amount proportional to its index (a differential turn, not a rigid
+// spin) grows and shrinks the caustic. The show: the eye BLOOMS from nothing,
+// BREATHES with a quickening tempo up to a CLIMAX (flushing crimson), settles, then
+// DISSOLVES back to nothing — every string dead straight the whole time.
+//
+//   manic examples/string-art-breath.manic
+canvas(1000, 1000);
+template("paper");
+
+let n   = 190;
+let cx  = 500;
+let cy  = 500;
+let rr  = 430;
+let pi  = 3.14159265;
+
+for i in 0..n {
+  let a = i * 2 * pi / n;
+  dot(o{i}, (cx + rr * cos(a), cy + rr * sin(a)), 1); hidden(o{i});
+  dot(p{i}, (cx + rr * cos(a), cy + rr * sin(a)), 1); hidden(p{i});   // starts unwound -> blank
+  link(s{i}, o{i}, p{i});
+  color(s{i}, #101010);
+  stroke(s{i}, 0.5);
+  tag(s{i}, strings);
+}
+
+// the wordmark, waiting in the wings for the finale
+text(word, (cx, cy), "manic"); size(word, 104); color(word, #101010); hidden(word);
+
+par {
+  // the breath: bloom -> breathe (quickening) -> climax -> settle -> dissolve.
+  // every turn is on one anchor by an index-proportional amount, so the caustic
+  // grows and shrinks as one.
+  for i in 0..n {
+    let f = i * 360 / n;      // full wind: takes point i to point 2i (the eye forms)
+    let d = f * 0.45;         // breath depth
+    seq {
+      turn(p{i}, (cx, cy),  f,       4.0, out);      // BLOOM into the eye
+      turn(p{i}, (cx, cy), -d,       3.0, smooth);   // breathe open
+      turn(p{i}, (cx, cy),  d,       3.0, smooth);   // close
+      turn(p{i}, (cx, cy), -d * 1.2, 2.0, smooth);   // deeper, quicker
+      turn(p{i}, (cx, cy),  d * 1.2, 2.0, smooth);
+      turn(p{i}, (cx, cy), -d * 1.45, 1.4, smooth);  // CLIMAX
+      turn(p{i}, (cx, cy),  d * 1.45, 1.4, smooth);
+      turn(p{i}, (cx, cy), -d,       3.2, smooth);   // settle
+      turn(p{i}, (cx, cy),  d,       3.2, smooth);
+      turn(p{i}, (cx, cy), -f,       4.5, in);       // DISSOLVE back to nothing
+    }
+  }
+  // colour drama: an ink eye that flushes crimson through the climax, then cools,
+  // and finally fades right out so no wire is left for the finale.
+  seq {
+    wait(9.0);
+    recolor(strings, #a80028, 3.0);   // blood rushes in as it quickens
+    recolor(strings, #101010, 6.0);   // cools back to ink
+    wait(6.5);
+    fade(strings, 3.0);               // every string gone by ~27.5s
+  }
+  // finale: once the wires are gone, the wordmark rises
+  seq {
+    wait(27.5);
+    show(word, 1.4);
+    recolor(word, #ff2d95, 0.8);      // a brand-magenta beat
+    pulse(word);
+    wait(1.4);
+  }
+}

package/examples/string-wave.manic

@@ -0,0 +1,10 @@
+// string-wave.manic — a wave on a plucked string: N masses on springs, both ends
+// fixed (the discretised wave equation). `stringwave(id,[center],[width],[amp],
+// [pluck])`. Pluck it off-centre and the pulse splits into two, travels out, and
+// reflects (inverting) off the fixed ends. Drawn as a rainbow chain that wiggles.
+title("Wave on a string — pluck it and watch it travel");
+canvas("16:9");
+text(hdr, (cx, 70), "Pluck a string: the pulse splits, travels, and reflects off the ends"); size(hdr, 23); color(hdr, cyan); bold(hdr); display(hdr);
+stringwave(sw, (cx, 380), 900, 110, 0.28);
+text(cap, (cx, h - 40), "36 masses on springs, fixed at both ends — the wave equation, pre-simulated with RK4"); size(cap, 16); color(cap, dim); display(cap);
+run(sw, 10);

package/examples/summary.manic

@@ -0,0 +1,48 @@
+// ============================================================================
+//  summary.manic  —  describe a dataset (stats Tier 1)
+// ----------------------------------------------------------------------------
+//  `summary(id, (cx,cy), "v1 v2 v3 …", [width], [color])` is the descriptive-
+//  statistics workhorse: the data as dots on a number line, with the **mean**
+//  (gold), **median** (magenta) and **mode** (lime) marked, a translucent
+//  **±1σ spread band**, and a readout of **n / range / variance / std**.
+//  Pieces: `{id}.dots` (the cloud), `{id}.meanmark`/`.medianmark`/`.modemark`
+//  (+ `.*lbl`), `{id}.band`, `{id}.min`/`.max`, `{id}.readout`.
+//
+//  TO ADAPT: paste your own numbers. Central tendency (mean/median/mode) and
+//  dispersion (range/variance/std) come out in one call.
+// ============================================================================
+
+title("Describe a dataset");
+canvas("16:9");
+
+text(hdr, (cx, 64), "20 daily temperatures — centre and spread");
+size(hdr, 24); color(hdr, cyan); bold(hdr); display(hdr);
+
+summary(sm, (cx, cy - 10),
+  "18 21 20 22 19 23 21 20 21 24 22 21 19 20 23 21 22 20 21 25", 640);
+// reveal in beats
+untraced(sm.line);
+hidden(sm.dots);
+hidden(sm.band);
+hidden(sm.meanmark); hidden(sm.meanlbl);
+hidden(sm.medianmark); hidden(sm.medianlbl);
+hidden(sm.modemark); hidden(sm.modelbl);
+hidden(sm.readout);
+
+text(cap, (cx, h - 46), ""); size(cap, 22); color(cap, dim); display(cap);
+
+say(cap, "start with the raw numbers, laid out on a line", 0.5);
+draw(sm.line, 0.6);
+show(sm.dots, 0.6);
+wait(1.4);
+
+say(cap, "the centre: mean, median and mode", 0.5);
+show(sm.meanmark, 0.4); show(sm.meanlbl, 0.4);
+show(sm.medianmark, 0.4); show(sm.medianlbl, 0.4);
+show(sm.modemark, 0.4); show(sm.modelbl, 0.4);
+wait(1.6);
+
+say(cap, "the spread: most values fall within one standard deviation of the mean", 0.5);
+to(sm.band, opacity, 0.12, 0.6);
+show(sm.readout, 0.4);
+wait(2.0);

package/examples/svg-howto.manic

@@ -0,0 +1,172 @@
+// ============================================================================
+//  svg-howto.manic — "MADE OF EMOJI"
+//
+//  Not a lecture — a spectacle. From one point, a storm of imported emoji
+//  explodes, swirls into a galaxy, then snaps into a beating heart — dozens of
+//  vectors choreographed by pure math, exploded again into a flag-lit finale.
+//  Every actor is an `svg()` import; nothing is a texture; it's all computed.
+//
+//    manic examples/svg-howto.manic
+//    manic examples/svg-howto.manic --record out --preset reel
+// ============================================================================
+
+title("Made of Emoji — a vector spectacle");
+canvas("16:9");
+template("blank");
+
+voice("elevenlabs");                       // promo narration (ELEVENLABS_API_KEY)
+// voice("elevenlabs", "alice");
+// voice("elevenlabs", "jessica");
+// voice("cartesia");  // voice("gtts");   // free fallback
+// speak("…") = voice only; say(sub, "…") = on-screen text; both can run together.
+
+// deep-space backdrop
+rect(space, (cx, cy), w*2, h*2); filled(space); gradient(space, void, indigo, radial);
+
+text(sub, (cx, h*0.9), ""); size(sub, 30); color(sub, fg); display(sub); glow(sub, 0.4);
+
+// ---- the swarm: 30 heart emoji, rainbow-hued, all born at the centre ----
+for i in 0..30 {
+  svg(sw{i}, (cx, cy), "asset:svg/emoji/heart.svg", 46);
+  hue(sw{i}, i*12);                 // rainbow, one hue apiece
+  tag(sw{i}, swarm); z(sw{i}, 5); hidden(sw{i});
+}
+
+// ---- burst engines (gold ignition, cyan confetti) ----
+rect(bseed, (cx, cy), 24, 24); hidden(bseed);
+particles(spark, bseed, 30, 6, 22, "random"); color(spark, gold); glow(spark, 0.9); hidden(spark);
+rect(cseed, (cx, cy), 24, 24); hidden(cseed);
+particles(conf, cseed, 30, 6, 22, "random"); color(conf, cyan); glow(conf, 0.9); hidden(conf);
+
+// ---- the finale cast (flags + hero emoji rain in) ----
+svg(rk,  (cx, h + 120), "asset:svg/emoji/rocket.svg", 120); z(rk, 9); hidden(rk);
+svg(hero0, (cx - 500, -80), "asset:svg/emoji/fire.svg",   80); hidden(hero0);
+svg(hero1, (cx - 250, -80), "asset:svg/emoji/star.svg",   80); hidden(hero1);
+svg(hero2, (cx + 250, -80), "asset:svg/emoji/party.svg",  80); hidden(hero2);
+svg(hero3, (cx + 500, -80), "asset:svg/emoji/trophy.svg", 80); hidden(hero3);
+svg(flag0, (cx - 420, -80), "asset:svg/flags/in.svg", 92); hidden(flag0);
+svg(flag1, (cx - 140, -80), "asset:svg/flags/br.svg", 92); hidden(flag1);
+svg(flag2, (cx + 140, -80), "asset:svg/flags/jp.svg", 92); hidden(flag2);
+svg(flag3, (cx + 420, -80), "asset:svg/flags/de.svg", 92); hidden(flag3);
+
+// ---- the sampler: a stack of diverse shapes to riffle through ----
+svg(smp0,  (cx, cy - 40), "asset:svg/emoji/rocket.svg",       220); hidden(smp0);
+svg(smp1,  (cx, cy - 40), "asset:svg/emoji/party.svg",        220); hidden(smp1);
+svg(smp2,  (cx, cy - 40), "asset:svg/emoji/brain.svg",        220); hidden(smp2);
+svg(smp3,  (cx, cy - 40), "asset:svg/flags/jp.svg",           240); hidden(smp3);
+svg(smp4,  (cx, cy - 40), "asset:svg/emoji/trophy.svg",       220); hidden(smp4);
+svg(smp5,  (cx, cy - 40), "asset:svg/lucide/cpu.svg",         200); hue(smp5, 190);  hidden(smp5);
+svg(smp6,  (cx, cy - 40), "asset:svg/flags/br.svg",           240); hidden(smp6);
+svg(smp7,  (cx, cy - 40), "asset:svg/emoji/fire.svg",         220); hidden(smp7);
+svg(smp8,  (cx, cy - 40), "asset:svg/heroicons/bolt.svg",     200); hue(smp8, 48);   hidden(smp8);
+svg(smp9,  (cx, cy - 40), "asset:svg/flags/in.svg",           240); hidden(smp9);
+svg(smp10, (cx, cy - 40), "asset:svg/emoji/star.svg",         220); hidden(smp10);
+svg(smp11, (cx, cy - 40), "asset:svg/lucide/globe.svg",       200); hue(smp11, 130); hidden(smp11);
+svg(smp12, (cx, cy - 40), "asset:svg/emoji/earth.svg",        220); hidden(smp12);
+svg(smp13, (cx, cy - 40), "asset:svg/flags/de.svg",           240); hidden(smp13);
+svg(smp14, (cx, cy - 40), "asset:svg/heroicons/beaker.svg",   200); hue(smp14, 300); hidden(smp14);
+svg(smp15, (cx, cy - 40), "asset:svg/emoji/heart.svg",        220); hidden(smp15);
+
+text(mark, (cx, cy - 20), "MANIC"); size(mark, 110); color(mark, gold); bold(mark); display(mark); glow(mark, 1.2); hidden(mark);
+text(tagl, (cx, cy + 78), "6,404 shapes · one file · all computed");
+size(tagl, 26); color(tagl, cyan); display(tagl); hidden(tagl);
+
+// ============================================================================
+//  THE SPECTACLE  (fast, punchy)
+// ============================================================================
+
+// 1 — SINGULARITY: everything waits in one blinding point.
+seq {
+  zoom(1.35, 0.01);
+  show(sw0, 0.3);
+  par { for i in 0..30 { show(sw{i}, 0.25); } }   // a tight rainbow knot at centre
+  pulse(sw0);
+  say(sub, "One line…", 0.25);
+  speak("This… is one line of Manic.");
+  wait(0.2);
+}
+
+// 2 — BIG BANG: the storm explodes outward into a ring.
+seq {
+  say(sub, "…one universe.", 0.25);
+  speak("From it, a whole universe of vectors explodes into being.");
+  show(spark, 0.05); burst(spark, 0.7);
+  par {
+    for i in 0..30 {
+      move(sw{i}, (cx + 300*cos(i*12*pi/180), cy + 300*sin(i*12*pi/180)), 0.7, out);
+    }
+    zoom(1.0, 0.7, smooth);
+  }
+  wait(0.15);
+}
+
+// 3 — GALAXY: the ring breathes (turn removed to test formation).
+seq {
+  say(sub, "computed — never drawn.", 0.3);
+  speak("Import any SVG — an icon, a flag, an emoji — as living geometry. Not a picture. Real shapes you can move and colour.");
+  par { for i in 0..30 { pulse(sw{i}); } }
+  wait(0.2);
+}
+
+// 4 — THE HEART: dozens of vectors snap into a single shape.
+seq {
+  say(sub, "shape them at will.", 0.3);
+  speak("Watch thirty of them snap into a single form — placed by pure math.");
+  par {
+    for i in 0..30 {
+      move(sw{i},
+        (cx + 208*sin(i*pi/15)*sin(i*pi/15)*sin(i*pi/15),
+         cy - (169*cos(i*pi/15) - 65*cos(2*i*pi/15) - 26*cos(3*i*pi/15) - 13*cos(4*i*pi/15)) + 40),
+        1.1, smooth);
+    }
+  }
+  par { for i in 0..30 { pulse(sw{i}); } }         // the heart beats
+  wait(0.4);
+}
+
+// 4.5 — THE LIBRARY: riffle the catalogue so they see the full range.
+seq {
+  say(sub, "and not just hearts — 6,404 shapes, one line each.", 0.3);
+  speak("And it's not just hearts. Six thousand four hundred shapes ship inside — every icon, every flag, every emoji — each one line away.");
+  par { for i in 0..30 { fade(sw{i}, 0.4); } }     // clear the heart
+  stagger(0.2) {
+    for i in 0..16 { seq { show(smp{i}, 0.14); fade(smp{i}, 0.3); } }
+  }
+  wait(0.2);
+}
+
+// 5 — CELEBRATION: flags and heroes rain in; confetti pops.
+seq {
+  say(sub, "every shape. every colour. one file.", 0.35);
+  speak("Faithful colours. Real vectors. Recolour them, move them, explode them — all from one text file.");
+  show(conf, 0.05); burst(conf, 0.9);
+  stagger(0.06) {
+    move(flag0, (cx - 420, cy - 250), 0.7, overshoot); show(flag0, 0.1);
+    move(hero0, (cx - 500, cy + 250), 0.7, overshoot); show(hero0, 0.1);
+    move(flag1, (cx - 140, cy - 250), 0.7, overshoot); show(flag1, 0.1);
+    move(hero1, (cx - 250, cy + 250), 0.7, overshoot); show(hero1, 0.1);
+    move(flag2, (cx + 140, cy - 250), 0.7, overshoot); show(flag2, 0.1);
+    move(hero2, (cx + 250, cy + 250), 0.7, overshoot); show(hero2, 0.1);
+    move(flag3, (cx + 420, cy - 250), 0.7, overshoot); show(flag3, 0.1);
+    move(hero3, (cx + 500, cy + 250), 0.7, overshoot); show(hero3, 0.1);
+  }
+  wait(0.4);
+}
+
+// 6 — FINALE: it all bursts apart; a rocket tears through to the title.
+seq {
+  say(sub, "", 0.1);
+  show(spark, 0.05); burst(spark, 0.8);
+  par {
+    fade(flag0, 0.5); fade(flag1, 0.5); fade(flag2, 0.5); fade(flag3, 0.5);
+    fade(hero0, 0.5); fade(hero1, 0.5); fade(hero2, 0.5); fade(hero3, 0.5);
+  }
+  show(rk, 0.2);
+  move(rk, (cx, cy + 40), 0.7, out);
+  par { flash(rk, cyan); pulse(rk); }
+  move(rk, (cx, -160), 0.6, in);                   // it launches off the top
+  par { show(mark, 0.5); show(tagl, 0.5); }
+  speak("This is Manic — turn plain text into vector spectacle. Try it free at eight g wifi dot org slash manic.");
+  flash(mark, gold);
+  wait(1.4);
+}

package/examples/svg-import.manic

@@ -0,0 +1,18 @@
+// SVG vector import — bring artwork in as NATIVE path entities (not a texture).
+// Each subpath of heart.svg becomes a traceable Polyline / filled Polygon, fitted
+// to 320 px wide and centred; the pieces are tagged `heart`, so ONE verb animates
+// the whole drawing. Imported colours reproduce faithfully (the #ff2d95 fill is
+// kept literal, not re-themed). This is the 2D twin of `model3`'s OBJ import.
+title("SVG Vector Import");
+canvas("16:9");
+template("neon");
+
+svg(heart, (cx, cy), "asset:svg/heart.svg", 320);
+
+hidden(heart);
+show(heart, 0.8);          // reveal — real geometry, faithful colours
+wait(0.4);
+pulse(heart, 0.9);         // animate the whole drawing with one verb
+wait(0.6);
+recolor(heart, cyan);      // …and recolour it — imported vectors are first-class
+wait(1.2);

package/examples/systems-architecture-poc.manic

@@ -0,0 +1,92 @@
+title("Systems Kit PoC — What Happens When You Click Buy?");
+canvas("16:9");
+template("mono");
+
+let u = (w+h-abs(w-h))/1440;
+watermark(mark, (w*0.15, h*0.07), "Made With Manic");
+text(kicker, (cx, h*0.075), "SYSTEMS KIT · REQUEST JOURNEY");
+text(headline, (cx, h*0.155), "What happens when you click Buy?");
+text(caption, (cx, h*0.88), "One request keeps its identity while the architecture responds.");
+size(kicker, 18*u); color(kicker, dim); bold(kicker);
+size(headline, 34*u); bold(headline); wrap(headline, w*0.84);
+size(caption, 19*u); color(caption, dim); wrap(caption, w*0.82);
+
+architecture(shop, (cx, h*0.49), w*0.84, h*0.58);
+node(browser, shop, "client", "Browser");
+node(edge, shop, "aws:cloudfront", "CloudFront");
+node(api, shop, "aws:api-gateway", "API Gateway");
+node(checkout, shop, "aws:lambda", "Checkout");
+node(orders, shop, "aws:dynamodb", "Orders");
+node(events, shop, "aws:sqs", "Events");
+
+connect(toEdge, browser, edge);
+connect(toApi, edge, api);
+connect(toCheckout, api, checkout);
+connect(toOrders, checkout, orders);
+connect(toEvents, orders, events);
+request(order, browser, "BUY");
+
+hidden(shop.nodes);
+untraced(shop.connections);
+hidden(order.parts);
+
+step("architecture") {
+  stagger(0.10) {
+    show(browser, 0.30); show(edge, 0.30); show(api, 0.30);
+    show(checkout, 0.30); show(orders, 0.30); show(events, 0.30);
+  }
+}
+wait(0.25);
+
+step("request") {
+  par {
+    show(order.parts, 0.30);
+    draw(shop.connections, 0.90);
+    say(caption, "The browser sends one request into the edge network.", 0.35);
+  }
+}
+wait(0.20);
+
+step("edge") {
+  par {
+    route(order, toEdge, 0.90, smooth);
+    say(caption, "CloudFront receives it first, close to the customer.", 0.35);
+  }
+}
+
+step("api") {
+  par {
+    route(order, toApi, 0.90, smooth);
+    say(caption, "API Gateway validates and routes the operation.", 0.35);
+  }
+}
+
+step("compute") {
+  par {
+    route(order, toCheckout, 0.90, smooth);
+    say(caption, "Lambda executes the checkout logic.", 0.35);
+  }
+}
+
+step("persist") {
+  par {
+    route(order, toOrders, 0.90, smooth);
+    say(caption, "DynamoDB persists the order.", 0.35);
+  }
+}
+
+step("event") {
+  par {
+    route(order, toEvents, 0.90, smooth);
+    say(caption, "SQS decouples the work that can happen next.", 0.35);
+  }
+}
+wait(0.30);
+
+step("takeaway") {
+  par {
+    pulse(shop.nodes, 0.75);
+    say(caption, "Architecture becomes understandable when we follow behavior—not only boxes and arrows.", 0.45);
+  }
+}
+wait(1.20);