@maniclang/workbench 0.1.11

package/examples/reactive-math-journey.manic

@@ -0,0 +1,185 @@
+// ============================================================================
+// reactive-math-journey.manic — from Class 1 counting to PhD curiosity
+// ----------------------------------------------------------------------------
+// One equation id grows with the learner. `rewrite` keeps the journey continuous
+// while a progress marker climbs through school, university and research.
+// The ending returns to 1+1: advanced mathematics keeps the original curiosity.
+// ============================================================================
+
+title("From 1 + 1 to a PhD in Mathematics");
+canvas("9:16");
+template("shorts");
+watermark(manicMark, (w*0.895-100, h*0.075+24), "Made With Manic");
+
+creator(me, "@anish2good name=Math_Journey tagline=Stay_curious yt=zarigatongy x=@anish2good web=8gwifi.org/manic accent=cyan secondary=magenta footer=social cta=Keep_learning safe=reels");
+socials(me);
+
+text(kicker, (540, 135), "THE JOURNEY OF MATHEMATICS");
+size(kicker, 23); color(kicker, dim); bold(kicker); hidden(kicker);
+
+text(headline, (540, 225), "From 1 + 1 to a PhD");
+size(headline, 47); color(headline, fg); bold(headline); hidden(headline);
+
+text(subhead, (540, 292), "Same curiosity. Bigger questions.");
+size(subhead, 25); color(subhead, cyan); bold(subhead); hidden(subhead);
+
+// The learning stage leaves a slim left lane for the climbing progress marker.
+rect(stage, (610, 790), 820, 760);
+color(stage, panel); outline(stage, dim); opacity(stage, 0.78);
+
+line(rail, (135, 1135), (135, 535));
+color(rail, cyan); stroke(rail, 3); dashed(rail, 13, 10); opacity(rail, 0.35);
+untraced(rail);
+
+for i in 0..13 {
+  dot(milestone{i}, (135, 1135 - i*50), 5);
+  color(milestone{i}, dim); opacity(milestone{i}, 0.55);
+}
+
+dot(learner, (135, 1135), 12);
+color(learner, cyan); glow(learner, 2.2); hidden(learner);
+
+text(level, (610, 495), "CLASS 1 · COUNTING");
+size(level, 25); color(level, cyan); bold(level); hidden(level);
+
+equation(work, (610, 775), `1+1=2`, 58);
+hidden(work);
+
+text(note, (610, 1035), "Two apples. One idea. A lifetime of questions begins.");
+size(note, 27); color(note, dim); wrap(note, 700); hidden(note);
+
+text(altitude, (540, 1265), "SCHOOL  →  UNIVERSITY  →  RESEARCH");
+size(altitude, 22); color(altitude, dim); bold(altitude); hidden(altitude);
+
+// ---------------------------------------------------------------------------
+// TIMELINE
+// ---------------------------------------------------------------------------
+
+par {
+  show(kicker, 0.40); show(headline, 0.55); show(subhead, 0.55);
+  show(level, 0.45); show(note, 0.45); show(altitude, 0.45);
+  draw(rail, 0.90); show(learner, 0.45);
+}
+show(work, 0.55);
+wait(0.85);
+
+// Class 2 — repeated addition discovers multiplication.
+par {
+  say(level, "CLASS 2 · MULTIPLICATION", 0.35);
+  say(note, "Addition gets impatient and invents a shortcut.", 0.35);
+  move(learner, (135, 1085), 0.45, smooth);
+}
+rewrite(work, `3+3+3+3=12`, 0.80, smooth);
+wait(0.35);
+rewrite(work, `4\times3=\textcolor{lime}{12}`, 0.80, smooth);
+wait(0.65);
+
+// Class 5 — pieces become numbers too.
+par {
+  say(level, "CLASS 5 · FRACTIONS", 0.35);
+  say(note, "Now even pieces of a whole can be added exactly.", 0.35);
+  move(learner, (135, 1035), 0.45, smooth);
+}
+rewrite(work, `\frac{1}{2}+\frac{1}{3}=\textcolor{lime}{\frac{5}{6}}`, 0.90, smooth);
+wait(0.70);
+
+// Class 7 — the mystery number gets a name.
+par {
+  say(level, "CLASS 7 · ALGEBRA", 0.35);
+  say(note, "A blank box becomes x — and arithmetic starts telling stories.", 0.35);
+  move(learner, (135, 985), 0.45, smooth);
+}
+rewrite(work, `x+3=7`, 0.80, smooth);
+wait(0.30);
+rewrite(work, `x=\textcolor{lime}{4}`, 0.75, smooth);
+wait(0.65);
+
+// Class 8 — shapes reveal equations hidden inside them.
+par {
+  say(level, "CLASS 8 · GEOMETRY", 0.35);
+  say(note, "A right triangle quietly connects three squares.", 0.35);
+  move(learner, (135, 935), 0.45, smooth);
+}
+rewrite(work, `a^2+b^2=\textcolor{cyan}{c^2}`, 0.85, smooth);
+wait(0.70);
+
+// Class 10 — one formula solves every quadratic.
+par {
+  say(level, "CLASS 10 · QUADRATICS", 0.35);
+  say(note, "The unknown now has two possible futures.", 0.35);
+  move(learner, (135, 885), 0.45, smooth);
+}
+rewrite(work, `ax^2+bx+c=0`, 0.85, smooth);
+wait(0.30);
+rewrite(work, `x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}`, 1.00, smooth);
+wait(0.75);
+
+// Class 11 — circles turn into identities.
+par {
+  say(level, "CLASS 11 · TRIGONOMETRY", 0.35);
+  say(note, "Sine and cosine travel differently, but always return to one.", 0.35);
+  move(learner, (135, 835), 0.45, smooth);
+}
+rewrite(work, `\sin^2\theta+\cos^2\theta=\textcolor{lime}{1}`, 0.90, smooth);
+wait(0.70);
+
+// Class 12 — mathematics learns to describe change itself.
+par {
+  say(level, "CLASS 12 · CALCULUS", 0.35);
+  say(note, "Not just where things are — how fast they are changing.", 0.35);
+  move(learner, (135, 785), 0.45, smooth);
+}
+rewrite(work, `\frac{d}{dx}x^n=\textcolor{cyan}{nx^{n-1}}`, 0.95, smooth);
+wait(0.75);
+
+// University — numbers become transformations and uncertain beliefs.
+par {
+  say(level, "UNIVERSITY · LINEAR ALGEBRA", 0.35);
+  say(note, "Some directions do not turn — they only stretch.", 0.35);
+  move(learner, (135, 735), 0.45, smooth);
+}
+rewrite(work, `A\vec v=\textcolor{magenta}{\lambda}\vec v`, 0.90, smooth);
+wait(0.70);
+
+par {
+  say(level, "UNIVERSITY · PROBABILITY", 0.35);
+  say(note, "Evidence arrives, and a belief learns how to update.", 0.35);
+  move(learner, (135, 685), 0.45, smooth);
+}
+rewrite(work, `P(A\mid B)=\frac{P(B\mid A)P(A)}{P(B)}`, 0.95, smooth);
+wait(0.75);
+
+// Graduate study — equations evolve, then decompose into waves.
+par {
+  say(level, "GRADUATE · DIFFERENTIAL EQUATIONS", 0.35);
+  say(note, "A tiny law of change predicts an entire future.", 0.35);
+  move(learner, (135, 635), 0.45, smooth);
+}
+rewrite(work, `\frac{dy}{dt}=ky`, 0.85, smooth);
+wait(0.30);
+rewrite(work, `y(t)=y_0e^{kt}`, 0.85, smooth);
+wait(0.70);
+
+par {
+  say(level, "GRADUATE · FOURIER ANALYSIS", 0.35);
+  say(note, "A complicated signal turns out to be a choir of simple waves.", 0.35);
+  move(learner, (135, 585), 0.45, smooth);
+}
+rewrite(work, `f(x)=\sum_{n=-\infty}^{\infty}c_ne^{inx}`, 0.95, smooth);
+wait(0.75);
+
+// PhD — the symbols are advanced; the habit is still “what if?”
+par {
+  say(level, "PhD · THE EDGE OF WHAT WE KNOW", 0.40);
+  say(note, "The integral now ranges over every possible field configuration.", 0.40);
+  move(learner, (135, 535), 0.55, overshoot);
+}
+rewrite(work, `\mathcal{Z}=\int\mathcal{D}\phi\,e^{-S[\phi]}`, 1.05, smooth);
+wait(1.00);
+
+// A loopable ending: the notation grew, but the first question never left.
+say(level, "THE REAL DEGREE · STAYING CURIOUS", 0.40);
+say(note, "After all that mathematics, the best researchers still ask: why?", 0.40);
+rewrite(work, `1+1=\textcolor{lime}{2}`, 1.00, smooth);
+pulse(learner, 0.65);
+wait(1.80);

package/examples/reactive-math-notation.manic

@@ -0,0 +1,150 @@
+// ============================================================================
+// reactive-math-notation.manic — one Reels-ready stage, thirteen notation worlds
+// ----------------------------------------------------------------------------
+// `rewrite` is deliberately domain-neutral. The same persistent equation moves
+// through algebra, calculus, logic, physics, chemistry, biology, probability
+// and linear algebra;
+// only changed RaTeX parts leave or enter. Mixed prose + inline math uses normal
+// `text`, and the last scene proves creator-defined notation needs no new verb.
+// ============================================================================
+
+title("Reactive Mathematics — One Language, Every Notation");
+canvas("9:16");
+template("shorts");
+watermark(manicMark, (w*0.895-100, h*0.075+24), "Made With Manic");
+
+creator(me, "@anish2good name=Notation_Lab tagline=Every_symbol_can_move yt=zarigatongy x=@anish2good web=8gwifi.org/manic accent=cyan secondary=magenta footer=social cta=Create_your_own safe=reels");
+socials(me);
+
+text(kicker, (540, 145), "ONE EQUATION · THIRTEEN SCIENTIFIC WORLDS");
+size(kicker, 23); color(kicker, dim); bold(kicker); hidden(kicker);
+
+text(headline, (540, 235), "If LaTeX can say it, Manic can move it");
+size(headline, 39); color(headline, fg); bold(headline); hidden(headline);
+
+rect(stage, (540, 755), 940, 760);
+color(stage, panel); outline(stage, dim); opacity(stage, 0.72); hidden(stage);
+
+text(topic, (540, 445), "01 · ALGEBRAIC REARRANGEMENT");
+size(topic, 23); color(topic, cyan); bold(topic); hidden(topic);
+
+equation(work, (540, 730), `2(x+3)=14`, 52);
+hidden(work);
+
+text(note, (540, 1040), "Keep the structure. Move only the mathematical change.");
+size(note, 25); color(note, dim); wrap(note, 800); hidden(note);
+
+// A normal text entity may freely mix prose and several inline formulas.
+text(mixed, (540, 735), `Energy $E=mc^2$ uses mass $m$ and light speed $c$.`);
+size(mixed, 31); color(mixed, fg); wrap(mixed, 780); hidden(mixed);
+
+text(scope, (540, 1245), "RaTeX accuracy · local motion · one stable layout");
+size(scope, 22); color(scope, dim); bold(scope); hidden(scope);
+
+// A subtle dashed construction line also demonstrates that `dashed` belongs
+// to Manic itself — plots and all other path-like entities can use it.
+line(rule, (215, 1155), (865, 1155));
+color(rule, cyan); stroke(rule, 2); dashed(rule, 12, 9); opacity(rule, 0.35);
+untraced(rule);
+
+// ---------------------------------------------------------------------------
+// TIMELINE — every chapter reuses `work`; nothing is manually repositioned.
+// ---------------------------------------------------------------------------
+
+par {
+  show(kicker, 0.45); show(headline, 0.55); show(stage, 0.50);
+  show(topic, 0.45); show(note, 0.45); show(scope, 0.45); draw(rule, 0.85);
+}
+show(work, 0.55);
+wait(0.70);
+rewrite(work, `2x=8\quad\Rightarrow\quad \textcolor{lime}{x=4}`, 0.85, smooth);
+wait(0.75);
+
+say(topic, "02 · INTEGRALS & DERIVATIVES", 0.35);
+say(note, "The Fundamental Theorem becomes a change of state, not a scene cut.", 0.35);
+rewrite(work, `F(x)=\int_0^x t^2\,dt`, 0.80, smooth);
+wait(0.45);
+rewrite(work, `F'(x)=\frac{d}{dx}\int_0^x t^2\,dt=\textcolor{cyan}{x^2}`, 0.95, smooth);
+wait(0.70);
+
+say(topic, "03 · FRACTIONS, ROOTS, POWERS & LIMITS", 0.35);
+say(note, "Nested notation is still one screen-aware equation.", 0.35);
+rewrite(work, `x^2+\sqrt{x}+\frac{1}{x}`, 0.80, smooth);
+wait(0.40);
+rewrite(work, `\lim_{x\to0}\frac{\sqrt{1+x}-1}{x}=\frac{1}{2}`, 0.95, smooth);
+wait(0.70);
+
+say(topic, "04 · TRIGONOMETRIC IDENTITIES", 0.35);
+say(note, "The unchanged terms stay; only the conclusion arrives.", 0.35);
+rewrite(work, `\sin^2\theta+\cos^2\theta`, 0.80, smooth);
+wait(0.40);
+rewrite(work, `\sin^2\theta+\cos^2\theta=\textcolor{lime}{1}`, 0.85, smooth);
+wait(0.70);
+
+say(topic, "05 · SET NOTATION & LOGIC", 0.35);
+say(note, "Membership, intersections and propositions share the same engine.", 0.35);
+rewrite(work, `x\in A\cap B`, 0.80, smooth);
+wait(0.40);
+rewrite(work, `(x\in A)\land(x\in B)`, 0.85, smooth);
+wait(0.70);
+
+say(topic, "06 · SUMMATIONS & PRODUCTS", 0.35);
+say(note, "Large operators retain their limits and baseline alignment.", 0.35);
+rewrite(work, `\sum_{k=1}^{n}k`, 0.80, smooth);
+wait(0.40);
+rewrite(work, `\prod_{k=1}^{n}k=\textcolor{magenta}{n!}`, 0.85, smooth);
+wait(0.70);
+
+say(topic, "07 · PHYSICS FORMULAS & UNITS", 0.35);
+say(note, "Symbols and dimensional units can live in one exact expression.", 0.35);
+rewrite(work, `F=ma`, 0.80, smooth);
+wait(0.40);
+rewrite(work, `[F]=\mathrm{kg}\cdot\mathrm{m}\cdot\mathrm{s}^{-2}`, 0.90, smooth);
+wait(0.70);
+
+say(topic, "08 · CHEMISTRY · BALANCED REACTIONS", 0.35);
+say(note, "Keep every molecule; introduce only the coefficients that balance atoms.", 0.35);
+rewrite(work, `H_2+O_2\rightarrow H_2O`, 0.80, smooth);
+wait(0.40);
+rewrite(work, `\textcolor{cyan}{2}H_2+O_2\rightarrow\textcolor{cyan}{2}H_2O`, 0.90, smooth);
+wait(0.70);
+
+say(topic, "09 · BIOLOGY · HARDY–WEINBERG", 0.35);
+say(note, "A population model grows from allele frequencies into genotype frequencies.", 0.35);
+rewrite(work, `p+q=1`, 0.80, smooth);
+wait(0.40);
+rewrite(work, `p^2+2pq+q^2=\textcolor{lime}{1}`, 0.90, smooth);
+wait(0.70);
+
+say(topic, "10 · PROBABILITY EXPRESSIONS", 0.35);
+say(note, "Conditioning expands into Bayes' rule without replacing the stage.", 0.35);
+rewrite(work, `P(A\mid B)`, 0.80, smooth);
+wait(0.40);
+rewrite(work, `P(A\mid B)=\frac{P(B\mid A)P(A)}{P(B)}`, 0.95, smooth);
+wait(0.70);
+
+say(topic, "11 · MATRICES & VECTORS", 0.35);
+say(note, "Rows, columns, brackets and vector marks remain genuine LaTeX.", 0.35);
+rewrite(work, `\vec v=\begin{bmatrix}1\\2\end{bmatrix}`, 0.85, smooth);
+wait(0.40);
+rewrite(work, `A\vec v=\begin{bmatrix}a&b\\c&d\end{bmatrix}\begin{bmatrix}1\\2\end{bmatrix}`, 1.00, smooth);
+wait(0.75);
+
+say(topic, "12 · TEXT MIXED WITH MATHEMATICS", 0.35);
+say(note, "Ordinary prose can carry multiple inline formulas naturally.", 0.35);
+fade(work, 0.35);
+show(mixed, 0.55);
+wait(1.25);
+fade(mixed, 0.35);
+
+say(topic, "13 · YOUR OWN NOTATION", 0.35);
+say(note, "Define the meaning in your story; Manic preserves the supported notation.", 0.35);
+rewrite(work, `\mathcal{R}_{\star}(x)\equiv x^2+1`, 0.90, smooth);
+wait(0.45);
+rewrite(work, `\mathcal{R}_{\star}(2)=\textcolor{lime}{5}`, 0.85, smooth);
+wait(1.20);
+
+say(topic, "ONE REACTIVE LANGUAGE", 0.40);
+say(note, "Math, physics, logic — creators decide what comes next.", 0.40);
+pulse(work, 0.70);
+wait(1.80);

package/examples/reactive-multiformat.manic

@@ -0,0 +1,130 @@
+// ============================================================================
+// reactive-multiformat.manic — one semantic story, four output formats
+// ----------------------------------------------------------------------------
+// Keep this source unchanged and render it with:
+//   manic examples/reactive-multiformat.manic --canvas portrait
+//   manic examples/reactive-multiformat.manic --canvas 4:5
+//   manic examples/reactive-multiformat.manic --canvas square
+//   manic examples/reactive-multiformat.manic --canvas 16:9
+// The override is applied before w/h/cx/cy and the build-time layout branch.
+// Every format keeps the same named steps, continuity, duration and identity.
+// ============================================================================
+
+title("One Story, Every Screen");
+canvas("9:16");
+template("shorts");
+
+creator(me, "@anish2good name=Visual_Proofs tagline=One_idea_every_screen yt=zarigatongy x=@anish2good web=8gwifi.org/manic accent=cyan secondary=magenta footer=signature cta=Keep_the_story safe=clean");
+
+let u = (w+h-abs(w-h)) / 2160; // min(w,h) / 1080 without a layout-specific constant
+watermark(manicMark, (w*0.955-100, h*0.045+24), "Made With Manic");
+
+// Portrait Reel / Short: story reads from top to bottom.
+if h > 1.45*w {
+  text(kicker, (cx, 125*u), "ONE SOURCE · PORTRAIT");
+  text(headline, (cx, 215*u), "A derivative is a world of slopes");
+  equation(work, (cx, 355*u), `f(x)=0.35x^2`, 54*u);
+
+  rect(stage, (cx, 900*u), 930*u, 940*u);
+  axes(ax, (cx, 1030*u), 410*u, 350*u, 1);
+  plot(curve, (cx, 1030*u), 115*u, 62*u, "0.35*x*x", (-3.5,3.5));
+  deriv(derivative, curve);
+  tangent(tan, curve, -2.7, 235*u);
+  slope(rate, curve, -2.7, (24*u,-30*u));
+  equation(curveLabel, (cx+310*u, 690*u), `f(x)`, 31*u);
+  equation(derivativeLabel, (cx+300*u, 1290*u), `f'(x)`, 31*u);
+  text(caption, (cx, 1450*u), "Move along the curve and every local slope tells part of a second story.");
+  wrap(caption, w*0.72);
+}
+
+// Landscape lesson: explanation on the left, visual stage on the right.
+else if w > 1.25*h {
+  text(kicker, (w*0.25, h*0.13), "ONE SOURCE · LANDSCAPE");
+  text(headline, (w*0.25, h*0.24), "A derivative is a world of slopes");
+  equation(work, (w*0.25, h*0.38), `f(x)=0.35x^2`, 54*u);
+
+  rect(stage, (w*0.72, h*0.48), w*0.49, h*0.70);
+  axes(ax, (w*0.72, h*0.55), 350*u, 285*u, 1);
+  plot(curve, (w*0.72, h*0.55), 90*u, 48*u, "0.35*x*x", (-3.5,3.5));
+  deriv(derivative, curve);
+  tangent(tan, curve, -2.7, 190*u);
+  slope(rate, curve, -2.7, (20*u,-25*u));
+  equation(curveLabel, (w*0.88, h*0.27), `f(x)`, 29*u);
+  equation(derivativeLabel, (w*0.88, h*0.76), `f'(x)`, 29*u);
+  text(caption, (w*0.25, h*0.60), "Move along the curve and every local slope tells part of a second story.");
+  wrap(caption, w*0.38);
+}
+
+// Square post / 4:5 feed: compact stacked composition.
+else {
+  text(kicker, (cx, h*0.09), "ONE SOURCE · FEED");
+  text(headline, (cx, h*0.17), "A derivative is a world of slopes");
+  equation(work, (cx, h*0.27), `f(x)=0.35x^2`, 52*u);
+
+  rect(stage, (cx, h*0.55), w*0.86, h*0.48);
+  axes(ax, (cx, h*0.59), 360*u, 270*u, 1);
+  plot(curve, (cx, h*0.59), 92*u, 48*u, "0.35*x*x", (-3.5,3.5));
+  deriv(derivative, curve);
+  tangent(tan, curve, -2.7, 195*u);
+  slope(rate, curve, -2.7, (20*u,-25*u));
+  equation(curveLabel, (cx+270*u, h*0.42), `f(x)`, 29*u);
+  equation(derivativeLabel, (cx+270*u, h*0.73), `f'(x)`, 29*u);
+  text(caption, (cx, h*0.84), "Move along the curve and every local slope tells part of a second story.");
+  wrap(caption, w*0.72);
+}
+
+size(kicker, 22*u); color(kicker, dim); bold(kicker); hidden(kicker);
+size(headline, 39*u); color(headline, fg); bold(headline); hidden(headline);
+size(caption, 25*u); color(caption, dim); hidden(caption);
+
+color(stage, panel); outline(stage, dim); opacity(stage, 0.72); hidden(stage);
+color(ax, dim); opacity(ax, 0.52); untraced(ax);
+color(curve, cyan); stroke(curve, 6*u); glow(curve, 0.75); untraced(curve);
+color(derivative, magenta); stroke(derivative, 5*u); dashed(derivative, 18*u, 11*u); untraced(derivative);
+color(tan, gold); stroke(tan, 4*u); hidden(tan);
+color(rate, gold); hidden(rate);
+color(work, cyan); hidden(work);
+color(curveLabel, cyan); hidden(curveLabel);
+color(derivativeLabel, magenta); hidden(derivativeLabel);
+
+socials(me);
+
+step("question") {
+  show(stage, 0.35);
+  show(kicker, 0.35);
+  show(headline, 0.45);
+  show(work, 0.50);
+  draw(ax, 0.80);
+  draw(curve, 1.30);
+  show(curveLabel, 0.40);
+  show(caption, 0.45);
+}
+wait(0.65);
+
+step("measure") {
+  rewrite(work, `f'(x)=0.70x`, 0.90, smooth);
+  show(tan, 0.40);
+  show(rate, 0.40);
+  to(tan, x, 2.7, 2.80, smooth);
+  to(rate, x, 2.7, 2.80, smooth);
+  say(caption, "The tangent and its live slope move as one explanation.", 0.40);
+}
+wait(0.55);
+
+step("collect-the-slopes") {
+  rewrite(work, `\textcolor{magenta}{f'(x)}=0.70x`, 0.90, smooth);
+  fade(tan, 0.35);
+  fade(rate, 0.35);
+  draw(derivative, 1.55);
+  show(derivativeLabel, 0.40);
+  say(caption, "Collect those local slopes and the derivative curve appears.", 0.40);
+}
+wait(0.65);
+
+step("takeaway") {
+  rewrite(work, `\text{slope of }f=\textcolor{magenta}{f'}`, 0.95, smooth);
+  pulse(curve, 0.70);
+  pulse(derivative, 0.70);
+  say(caption, "The layout can change. The idea, timing and identity stay together.", 0.40);
+}
+wait(1.60);

package/examples/reactive-world.manic

@@ -0,0 +1,111 @@
+// ============================================================================
+// reactive-world.manic — one world, named state transitions
+// ----------------------------------------------------------------------------
+// Each `step` changes several existing representations together. The equation,
+// tangent, live slope, derivative curve, caption and camera share one continuous
+// stage; anything a step does not mention simply persists.
+// ============================================================================
+
+title("Reactive World — The Derivative Lives on the Curve");
+canvas("9:16");
+template("terminal");
+watermark(manicMark, (865, 165), "Made With Manic");
+
+creator(me, "@anish2good name=Calculus_World tagline=One_idea_many_views yt=zarigatongy x=@anish2good web=8gwifi.org/manic accent=cyan secondary=magenta footer=social cta=See_the_change safe=reels");
+socials(me);
+
+text(kicker, (540, 130), "ONE WORLD · FIVE NAMED STEPS");
+size(kicker, 23); color(kicker, dim); bold(kicker); hidden(kicker);
+
+text(headline, (540, 215), "The derivative lives on the curve");
+size(headline, 39); color(headline, fg); bold(headline); hidden(headline);
+
+rect(stage, (540, 855), 930, 1050);
+color(stage, panel); outline(stage, dim); opacity(stage, 0.72);
+
+equation(work, (540, 390), `f(x)=0.35x^2`, 51);
+color(work, cyan); hidden(work);
+
+let ox = 540;
+let oy = 1050;
+let sx = 115;
+let sy = 62;
+
+axes(ax, (ox, oy), 410, 420, 1);
+color(ax, dim); opacity(ax, 0.55); untraced(ax);
+
+plot(f, (ox, oy), sx, sy, "0.35*x*x", (-3.5, 3.5));
+color(f, cyan); stroke(f, 6); glow(f, 0.8); untraced(f);
+
+deriv(df, f);
+color(df, magenta); stroke(df, 5); dashed(df, 18, 11); untraced(df);
+
+tangent(tan, f, -2.8, 235);
+color(tan, gold); stroke(tan, 4); hidden(tan);
+
+slope(rate, f, -2.8, (24, -30));
+color(rate, gold); hidden(rate);
+
+dot(vertex, (ox, oy), 10);
+color(vertex, lime); glow(vertex, 1.8); hidden(vertex);
+
+equation(curveLabel, (790, 650), `f(x)`, 31);
+color(curveLabel, cyan); hidden(curveLabel);
+
+equation(derivLabel, (790, 1320), `f'(x)`, 31);
+color(derivLabel, magenta); hidden(derivLabel);
+
+text(caption, (540, 1450), "Start with one curve and one moving question: how steep is it?");
+size(caption, 26); color(caption, dim); wrap(caption, 820); hidden(caption);
+
+// ---------------------------------------------------------------------------
+// NAMED REACTIVE STEPS
+// ---------------------------------------------------------------------------
+
+step("question") {
+  show(kicker, 0.40);
+  show(headline, 0.50);
+  show(work, 0.55);
+  draw(ax, 0.85);
+  draw(f, 1.40);
+  show(curveLabel, 0.45);
+  show(caption, 0.45);
+}
+wait(0.75);
+
+step("measure-slope") {
+  rewrite(work, `f'(x)=0.70x`, 0.90, smooth);
+  show(tan, 0.45);
+  show(rate, 0.45);
+  to(tan, x, 2.8, 3.20, smooth);
+  to(rate, x, 2.8, 3.20, smooth);
+  say(caption, "Move the point: the tangent and its slope update together.", 0.40);
+}
+wait(0.60);
+
+step("find-the-flat-point") {
+  rewrite(work, `f'(0)=\textcolor{lime}{0}`, 0.85, smooth);
+  to(tan, x, 0, 1.80, smooth);
+  to(rate, x, 0, 1.80, smooth);
+  show(vertex, 0.40);
+  say(caption, "At the vertex the tangent becomes flat, so the derivative is zero.", 0.40);
+}
+wait(0.65);
+
+step("see-the-derivative") {
+  rewrite(work, `f'(x)=\textcolor{magenta}{0.70x}`, 0.90, smooth);
+  fade(tan, 0.40);
+  fade(rate, 0.40);
+  draw(df, 1.70);
+  show(derivLabel, 0.45);
+  say(caption, "Collect every local slope and a second curve appears: the derivative.", 0.40);
+}
+wait(0.70);
+
+step("takeaway") {
+  rewrite(work, `\text{slope of }f=\textcolor{magenta}{f'}`, 0.95, smooth);
+  pulse(f, 0.70);
+  pulse(df, 0.70);
+  say(caption, "One idea, synchronized across symbols, geometry and motion.", 0.40);
+}
+wait(1.80);

package/examples/refraction-paper.manic

@@ -0,0 +1,40 @@
+// ============================================================================
+//  refraction-paper.manic  —  Snell's law as a textbook figure (annotated)
+// ----------------------------------------------------------------------------
+//  The `refract` sim dressed as a physics-class page: `template("paper")` inks
+//  it on cream, labelled media + normal + the law itself, and a gentle camera
+//  push on the bending point while `run` sweeps the incidence angle. Elevation
+//  lens: textbook annotation + camera. (Paper suits the geometry; the coloured
+//  dispersion demos stay on a dark bench where light glows.)
+// ============================================================================
+
+title("Refraction — Snell's Law");
+canvas("16:9");
+template("paper");
+
+refract(r, (660, 400), 1.0, 1.52);
+color(r.incident, red);            // gold washes out on cream — ink the incoming ray red
+color(r.thetai, red);
+
+// ---- textbook annotations (screen-fixed) ----
+text(mAir,  (150, 300), "air    n = 1.00");   color(mAir, dim);  size(mAir, 22); sticky(mAir);
+text(mGla,  (150, 500), "glass  n = 1.52");   color(mGla, dim);  size(mGla, 22); sticky(mGla);
+text(nlab,  (708, 250), "normal");            color(nlab, dim);  size(nlab, 18); sticky(nlab);
+text(law,   (cx, 92), "n1 · sin(in)  =  n2 · sin(out)"); color(law, fg); size(law, 30); bold(law); sticky(law);
+
+text(cap, (cx, h - 46), ""); color(cap, fg); size(cap, 24); bold(cap); display(cap); sticky(cap);
+
+// ================= THE SCENE =================
+say(cap, "light bends as it crosses into glass — Snell's law", 0.5);
+wait(0.5);
+
+par {
+  run(r, 8);
+  seq {
+    par { cam((660, 400), 2.2, smooth); zoom(1.18, 2.2, smooth); }   // ease in on the boundary
+    say(cap, "steeper in → it bends more, toward the normal", 0.3);
+    wait(3.0);
+    say(cap, "…but sin(in) / sin(out) never changes — that ratio IS n", 0.3);
+  }
+}
+wait(1.2);

package/examples/refraction.manic

@@ -0,0 +1,32 @@
+// ============================================================================
+//  refraction.manic  —  Snell's law you can watch (real optics)
+// ----------------------------------------------------------------------------
+//  The `optics` kit's first builtin: `refract` draws a light ray meeting the
+//  boundary between two media and bending. `run` SWEEPS the incidence angle, so
+//  the refracted ray genuinely swings — and the "in"/"out" read-outs are the
+//  true Snell angles, not painted. Here: air (n=1.00) into crown glass (n=1.52).
+// ============================================================================
+
+title("Refraction — Snell's Law");
+canvas("16:9");
+
+// air on top, glass below; no fixed angle → run(r) sweeps it
+refract(r, (640, 380), 1.0, 1.52);
+
+text(cap, (cx, h - 46), ""); color(cap, fg); size(cap, 24); bold(cap); display(cap); sticky(cap);
+
+// ================= THE SCENE =================
+say(cap, "a ray of light, crossing from air into glass…", 0.5);
+wait(0.5);
+
+par {
+  run(r, 7);
+  seq {
+    say(cap, "shallow angle — it barely bends", 0.3);
+    wait(2.2);
+    say(cap, "steeper in → it bends MORE, toward the normal", 0.3);
+    wait(2.6);
+    say(cap, "sin(in) / sin(out) is fixed — THAT ratio is the refractive index", 0.3);
+  }
+}
+wait(1.2);

package/examples/resonance.manic

@@ -0,0 +1,10 @@
+// resonance.manic — a driven spring pumped near its natural frequency.
+title("Resonance — driving near the natural frequency");
+canvas("16:9");
+text(hdr,(cx,44),"Resonance — drive near √(k/m) and the amplitude grows and grows"); size(hdr,22); color(hdr,cyan); bold(hdr); display(hdr);
+resonance(rs, (400,300), 3.8);   // natural freq = √(16/1) = 4; drive 3.8 ≈ resonance
+untraced(rs.path);
+phase(rs, (960,200), 100);       // spiral OUT to a big steady-state loop
+energygraph(rs, (960,470), 100); // energy climbs, then plateaus
+text(cap,(cx,h-32),"drive frequency 3.8 vs natural 4.0 — near resonance, so it builds up big"); size(cap,15); color(cap,dim); display(cap);
+par { run(rs, 12); draw(rs.path, 12); }