manic — the manual

manic is a declarative language for visual explanation. You write a readable text file; Manic turns it into a smooth, deterministic animation. No timeline scrubbing and no hand-managed keyframes — you describe the objects, the relationships, and the story beats while the engine handles motion, continuity, layout, rendering, and repeatable output.

Manic powers visual explanations, animated lessons, simulations, technical diagrams, and creator-ready videos from one readable language. Use it for mathematics, olympiad geometry, calculus, linear algebra, statistics, probability, algorithms and data structures; physics and optics; machine learning and transformer internals; systems architecture and flowcharts; fractals, tilings, fields, and particle processes; SVG artwork and bundled assets; narrated lessons; or polished Reels and Shorts. The same language moves naturally between responsive 2D, textbook-style spatial diagrams, and genuine 3D scenes.

The vocabulary is broad, but the mental model stays deliberately small enough for a non-programmer to read: name what exists, state what it depends on, and describe what should happen. Creators can begin with a circle and a caption, then keep the same model as they progress to live proofs, simulations, neural networks, or cinematic 3D stories.

Manic was created by Anish Nath. Follow its development, examples, and new visual-language experiments on X: @anish2good.

The whole idea in 30 seconds

A manic file has two parts:

1. The cast — the shapes on screen (a circle, a line, some text). You give each one a name.
2. The script — what happens over time, called out by name: draw this, move that, flash it green.

title("Hello");
canvas("16:9");

circle(sun, (640, 360), 90);   // the cast: a circle named `sun`
color(sun, cyan);

show(sun, 0.6);                 // the script: fade it in over 0.6s
pulse(sun);                     // then give it a little pulse

That’s the entire model. The rest of this guide builds outward from it—first ordinary shapes and motion, then reactive relationships, creator production, specialist kits, systems, simulations, and 3D. The complete generated vocabulary is available in the API reference.

How to read this book

Every section has a runnable sample and a short video of it playing, so you see exactly what each word does. Copy any sample into a .manic file and:

manic yourfile.manic              # live preview window
manic yourfile.manic --record out # render to out/out.mp4

Ready? Start with your first animation →

Making vertical social content? Take the production path directly: Create a polished Reel →

Choosing the visual surface? Manic defaults to full semantic colour on an exact black canvas; compare every option in Templates →.

Getting started

Let’s make the smallest real animation: a title fades in, a circle draws itself, and it pulses once.

Here primarily for vertical social video? Jump to Create a polished Reel, the complete Creator Kit workflow. Then use Reactive stories to keep equations, plots, diagrams, and captions synchronized across each explanation beat. Want spoken narration? See Voice — optional, one voice(...) plus speak("…") lines.

// getting started — one shape, drawn on, then a pulse.
title("Hello, manic");
canvas("16:9");

text(head, (cx, 140), "hello, manic");
color(head, cyan);  size(head, 40);  hidden(head);

circle(sun, (cx, cy), 110);
color(sun, magenta);  stroke(sun, 5);  glow(sun, 8);  untraced(sun);

show(head, 0.5);      // fade the title in
draw(sun, 1.2);       // trace the circle on
pulse(sun);           // a friendly pulse
wait(1.0);

▶ See it play:

What each line is doing

There is no template(...) line in this first sample, so it uses the full-colour black template automatically. See Templates when you want mono, paper, blueprint, terminal, or a tinted surface.

Two things worth internalising right away:

• cx, cy are the canvas centre. manic gives you w, h, cx, cy for free so you can place things without hard-coding pixels. (cx, cy) is always the middle.
• The order of the cast doesn’t matter, but the script runs top-to-bottom. show, then draw, then pulse play one after another. To make things happen at the same time, you wrap them in par { … } — that’s the Timing chapter.

Two ways to appear

Notice head uses hidden + show, but sun uses untraced + draw. That’s the one gotcha worth learning early:

• hidden + show → a fade-in (good for text and filled shapes).
• untraced + draw → a draw-on, like a pen tracing the outline (good for strokes, lines, plots).

Get those two pairs right and everything else clicks. Next: the shapes you can put on screen →

Create a polished Reel

Creator Kit v2 is the fastest path from an idea to a finished vertical video. It owns the responsive layout, safe areas, question hierarchy, answer cards, timer, reveal, creator footer, and end card. You provide the content and choose how restrained or energetic it should feel.

This chapter gives one dependable production recipe. Start here, then use the Creator reference and examples when you need every option.

The production recipe

For Shorts or TikTok, change both safe-area declarations to safe=shorts or safe=tiktok. The same source can also be reframed for 4:5, square, or 16:9; the Creator regions reflow automatically. Use --canvas 4:5, --canvas square, or --canvas 16:9 at preview/record time so the file stays unchanged. The Reactive stories chapter shows the full workflow and the responsive manual-layout pattern.

1. Write for a phone, not a slide

A strong first Reel usually has:

• one question or promise that fits in one or two lines;
• one visual idea—an equation, diagram, image, chart, or simulation;
• three or four short answer choices;
• one accent colour and one motion personality;
• a brief explanation and a single call to action.

Prefer direct wording. Move supporting context into explain; do not make the viewer read a paragraph before the timer starts. Use LaTeX for mathematical notation so formulas stay crisp and compact.

Gold pattern: let one equation evolve

For a solution Reel, do not stack five complete formulas or cut to a blank screen between steps. Declare one equation and rewrite it in place:

equation(work, (cx, 520), `x^2+2x=3`, 54);
rewrite(work, `x^2+2x+1=4`, 0.85, smooth);
wait(0.8);
rewrite(work, `(x+1)^2=4`, 0.85, smooth);

The viewer’s eye can follow the terms that move while unchanged symbols stay put. Manic matches rendered LaTeX by reading order, mathematical layout role, and nested math-style depth; an exponent therefore cannot become a denominator or a different level of an exponent tower merely because both use the same digit. When a fraction, radical, or grouping changes the structure of one side, that side cleanly leaves and reforms while the compatible side remains. Simple replacements such as 2 → 3 are staged as leave-then-enter, avoiding a temporary 23; pure additions can appear immediately. You still supply and own every correct step. For phone video, use one meaningful rewrite per narration beat, keep the equation in the media safe region, pause after the important result, and place any related plot or diagram motion beside the rewrite in par.

2. Let the format own layout

canvas("9:16");
template("black"); // optional: black is the DSL default

creator(me, "@anish2good name=Proof_Daily tagline=Think_then_prove \
yt=zarigatongy x=@anish2good web=8gwifi.org/manic \
accent=cyan secondary=magenta footer=signature cta=Save_and_share safe=reels");

quiz(q, "Your short question",
     "studio layout=media-first density=comfortable motion=calm safe=reels accent=cyan");

Use layout=media-first when the visual is part of the question, stack for up to four text-led answers, grid for four to six compact answers, and auto when you want manic to decide. Pass the visual to figure(id) instead of tuning its coordinates for each aspect ratio.

Temporarily add safezone(guide,"reels") while previewing a new design. It is a visible diagnostic overlay, so remove it before the final record. The safe=reels layout setting should remain.

3. Give reading, thinking, and payoff separate beats

The default run(q,10) is a good first draft. For a repeatable series, declare the exact beat:

timing(q, "calm ask=1.1 options=1 think=5.5 reveal=0.75 hold=2.15 stagger=0.06");
timerstyle(q, "look=ring position=below direction=drain color=cyan finish=pulse");
run(q);

A useful starting range is 1–1.5 seconds for the hook, 4–6 seconds to think, 0.6–0.9 seconds for the reveal, and 1.5–2.5 seconds to hold the explanation. Adjust for the actual reading load; the right pace is the one that remains clear on a phone.

timing owns choreography and timerstyle owns appearance. Change the ring to bar, segments, ticks, number, pulse, or none without moving a single beat. With explicit phases, always use run(q)—adding run(q,dur) would create a second competing duration.

Design shortcut: keep the default ring for most educational Reels. Use a bar for a longer process, segments for staged challenges, ticks for technical work, and pulse only for genuinely urgent moments.

4. Build a recognisable close

Call socials(profile) before the main animation so the selected footer is present throughout. endcard(profile) creates a hidden final lockup; fade the content, then reveal it for about one second or more.

Keep the CTA singular: “Save this”, “Try the next one”, or “Follow for more”. A creator profile is reusable across a whole series, so brand decisions live in one line rather than every scene. Inside a profile spec, use underscores where a value needs spaces: name=Proof_Daily cta=Save_and_share.

The endcard deliberately uses an editorial action row rather than a fully neon-filled button: a quiet inset surface keeps the creator name and final idea dominant, while a small two-colour rail and arrow chip carry the accent palette. On a black template, reserve bright colour for those details and keep CTA copy short enough to read in one glance.

For a channel-link row without external assets, choose footer=social and set the platform values directly: yt=zarigatongy x=@anish2good web=8gwifi.org/manic. Manic draws matching normalized icons and keeps the text inside the responsive footer. Use two or three identities for the clearest phone-size close; a larger platform set automatically becomes icon-only.

Complete Reel

This example uses exact phases, LaTeX media, the Reels safe area, a restrained native timer, a signature footer, timeline markers, and a final end card:

// A production-ready Creator v2 Reel: safe layout, exact pacing, one focal
// equation, restrained motion, reusable branding, markers, and an end card.
title("Perfect Reel — Angle Ratio");
canvas("9:16");
template("mono");
watermark(manicMark, (w*0.895-100, h*0.075+24), "Made With Manic");

creator(me, "@anish2good name=Proof_Daily tagline=Think_then_prove yt=zarigatongy x=@anish2good web=8gwifi.org/manic accent=cyan secondary=magenta footer=signature cta=Save_and_share safe=reels");

quiz(q, "Triangle angles: 2:3:4. What is the largest?",
     "studio layout=media-first reveal=fade density=comfortable motion=calm safe=reels accent=cyan");
option(q, `$60^\circ$`);
option(q, `$80^\circ$`, correct);
option(q, `$90^\circ$`);
option(q, `$100^\circ$`);
explain(q, `The parts total $9$, so $x=20^\circ$ and $4x=80^\circ$.`, "Angle sum");

equation(prompt, (cx, 650), `2x+3x+4x=180^\circ`, 70);
color(prompt, cyan);
figure(prompt);
hidden(prompt);

// Exact 10.5-second quiz beat. The timer look can change independently.
timing(q, "calm ask=1.1 options=1 think=5.5 reveal=0.75 hold=2.15 stagger=0.06");
timerstyle(q, "look=ring position=below number=inside direction=drain size=medium thickness=1.1 color=cyan track=dim label=THINK font=mono finish=pulse");

socials(me);
endcard(me, "cta=Save_and_share");

mark("hook");
par {
  run(q);
  show(prompt, 0.5);
}

mark("endcard");
par {
  fade(q.parts, 0.45);
  fade(prompt, 0.45);
  fade(me.footer, 0.45);
}
show(me.endcard, 0.6);
wait(1.4);

Preview and export

manic check examples/perfect-reel.manic
manic check examples/perfect-reel.manic --canvas all
manic examples/perfect-reel.manic

# Inspect representative phone frames: hook, countdown, and answer hold.
manic examples/perfect-reel.manic --still 0.8
manic examples/perfect-reel.manic --still 6.0
manic examples/perfect-reel.manic --still 10.0

# Vertical render with only your Creator profile branding.
manic examples/perfect-reel.manic --record out --preset reel --no-brand

Omit --no-brand if you also want the Manic intro and watermark. Recording writes markers.json; use its mark(...) timestamps to align narration, music, or captions in an editor.

Final phone-size review

Before publishing, check:

• Does manic check your-file.manic --canvas all pass portrait, feed, square, and landscape? See Visual checks for fixes.
• Can the hook be understood during the first beat?
• Is every important word and the CTA inside the selected safe area?
• Is there one obvious focal point, with no competing motion?
• Are the choices short, distinct, and marked with exactly one correct answer?
• Does the timer contrast with its track without overpowering the content?
• Does the explanation remain visible long enough to read aloud?
• Does the final card ask for one action and hold long enough to register?
• Are logos, photos, fonts, narration, and music yours or licensed for use?

Once those pass, keep the same profile, motion, colour, and closing pattern across the series. Consistency will make the next Reel both faster to produce and easier to recognise.

Next: Turn one polished scene into a reactive story →

Reference: Explore every Creator control and format variant.

Reactive stories — change the idea, not the scene

A polished Reel feels continuous: the equation changes, the point moves, the graph responds, and the caption explains the same idea without cutting to a blank screen. In Manic, build that as one persistent visual world and move it forward with named step blocks.

This is the creator mental model:

1. Declare the cast once — equation, plot, diagram, labels, caption, profile.
2. Give each story beat a short, meaningful name.
3. Inside that step, describe only what changes.
4. Leave everything else alone; it remains on screen automatically.

The result is easier to write, easier to revise, and easier for a viewer’s eye to follow.

One story, three layers

Think of a reactive video as three simple layers:

step does not introduce a new kind of animation. It gives ordinary Manic verbs a named conceptual boundary. Its children begin together, its duration is the longest child, and any entity not mentioned persists.

step("measure-slope") {
  rewrite(work, `f'(x)=0.70x`, 0.90, smooth);
  to(tangent, x, 2.8, 3.20, smooth);
  to(rate, x, 2.8, 3.20, smooth);
  say(caption, "The tangent and its slope update together.", 0.40);
}
wait(0.60);

Here the formula, tangent, live value, and explanation share one beat. The curve and every other unmentioned object remain exactly where they were.

A creator-first workflow

1. Start with the promise

Before writing motion, write the story as four or five beat names:

question → measure-slope → find-the-flat-point → see-the-derivative → takeaway

Use names that describe understanding, not implementation. show-blue-line is fragile; see-the-derivative still makes sense after the design changes.

For a short educational Reel, a reliable shape is:

• Hook: pose one visual question in the first two seconds.
• Explore: change one or two connected representations.
• Payoff: make the important relationship visible.
• Takeaway: hold one memorable sentence or result.

The same structure works for geometry proofs, physics simulations, chemistry reactions, data stories, algorithms, and product explainers. Reactive is a story pattern, not a mathematics-only feature.

2. Declare the world once

Give every continuing visual a stable id. Do not create equation1, equation2, and equation3 when the viewer should perceive one evolving equation. Keep work and rewrite it.

equation(work, (cx, 390), `f(x)=0.35x^2`, 51);
plot(curve, (cx, 1050), 115, 62, "0.35*x*x", (-3.5, 3.5));
text(caption, (cx, 1450), "How steep is this curve?");

Stable identity is what makes continuity possible. It also means a later style change, position adjustment, or wording fix happens in one place.

3. Change only what matters

Inside a step, pair the representations that explain one another:

step("find-the-flat-point") {
  rewrite(work, `f'(0)=\textcolor{lime}{0}`, 0.85, smooth);
  to(tangent, x, 0, 1.80, smooth);
  to(rate, x, 0, 1.80, smooth);
  show(vertex, 0.40);
  say(caption, "At the vertex the tangent is flat.", 0.40);
}

Do not fade and rebuild the whole screen for every sentence. Preserve context, move the smallest meaningful parts, and let the viewer compare before and after. For equations, rewrite retains safely matched LaTeX pieces and brings only the changed pieces in or out. Matching understands coarse mathematical layout roles and nested math-style depth, so the 2 in x^2 cannot jump into the denominator of \frac{b}{2a}, and one level of an exponential tower cannot become another. The same rule protects logarithm bases, integral limits, and derivative orders. Repeated symbols keep their reading order, so matrices and formulas containing several zeros or variables do not send copies across one another. When one equation side gains a fraction, radical, or grouping structure, that side leaves before its replacement enters; the compatible side and equality stay visible. For a globally incompatible change, Manic uses a staged whole-equation dissolve with only a short, dim overlap. Ordinary glyph replacements follow the same reading rule—the old value leaves before its successor becomes clear—while pure additions can still enter immediately. There is no extra mode to choose.

Manic animates the states you author; it does not solve or verify the maths. Write each intermediate LaTeX state exactly as it should appear.

For the cleanest teaching motion, keep genuinely unchanged work unchanged in the next LaTeX string. A stable right-hand side, fraction, or matrix remains recognisable while the edited side changes. Large changes are still valid—the engine will favour a clean dissolve over a misleading glyph scramble.

4. Give the result room to land

A step ends when its longest animation ends. Add a short wait after an important step so the viewer can read the settled frame:

step("result") {
  rewrite(work, `\text{slope of }f=\textcolor{magenta}{f'}`, 0.95, smooth);
  pulse(curve, 0.70);
  pulse(derivative, 0.70);
  say(caption, "The derivative is the curve of all local slopes.", 0.40);
}
wait(1.80);

Use seq { ... } inside a step only when that conceptual beat genuinely needs an internal order. Use par for anonymous choreography; use step when the beat should have a name and meaning.

Creator polish that matters

• Keep one focal change per step. Several synchronized views are fine when they all explain that one change.
• Reuse semantic colours: for example, cyan for the original function, magenta for its derivative, and lime for the key result.
• Put captions in a stable safe region. Let the words change with say instead of making the viewer search for a new text block.
• Prefer smooth movement and local equation rewrites over full-screen fades.
• Write for the final phone size. Short captions and one- or two-line equations beat dense slides.
• Keep the Creator profile and social footer consistent across a series, but do not let branding compete with the explanatory stage.
• Preview the hook, busiest transition, result, and end hold as still frames before recording the full video.

Named steps are editing markers

Every step name is automatically exported at the step’s start in markers.json and becomes a first-class preview/recording boundary. Inspect the story or open one beat directly:

manic stages examples/reactive-world.manic
manic examples/reactive-world.manic --stage find-the-flat-point

Those semantic boundaries make it easier to:

• align narration, music, captions, and sound effects;
• review or seek directly to a conceptual beat;
• identify a clean hook, explanation, result, or takeaway;
• export one stage or an inclusive stage range without copying timestamps.

Names must be non-empty, unique, and top-level. If you only need a timestamp without a reactive state change, use mark("name") instead.

Publish one story in four formats

A named-step story can now be reframed at render time without editing its source. Use --canvas to override the logical canvas before Manic calculates w, h, cx, cy, macros, and build-time layout branches:

manic examples/reactive-multiformat.manic --canvas portrait --record out-reel --preset reel
manic examples/reactive-multiformat.manic --canvas 4:5     --record out-feed
manic examples/reactive-multiformat.manic --canvas square  --record out-square
manic examples/reactive-multiformat.manic --canvas 16:9    --record out-lesson

The story’s named steps, equation continuity, timing, and identity remain the same. Only the logical layout changes. --canvas is separate from --preset: the canvas controls composition; the preset controls recording quality, frame rate, container, and engine branding.

Creator Kit regions already read the active canvas. For a hand-composed scene, prefer w, h, cx, and cy, then use a small build-time branch when the composition should genuinely change shape:

if h > 1.45*w {
  // vertical stack for a Reel or Short
}
else if w > 1.25*h {
  // explanation left, visual stage right
}
else {
  // compact square / 4:5 feed composition
}

An override cannot make hard-coded coordinates responsive by itself. The author still decides the useful composition for each shape of screen; Manic ensures every branch receives the correct dimensions before construction and keeps the semantic story unchanged.

Complete examples to learn from

• Reactive world — the best compact starting point: one curve, one equation, one tangent, and five named steps.
• Reactive multi-format — one source and one named timeline, with vertical, feed, square, and landscape compositions.
• Parameter journeys — one visible value drives a plot, analysis views, geometry, and a live readout without rebuilding the world.
• Reactive integral — an equation, integrand, antiderivative, and visual verification in one continuous world.
• Reactive notation — mathematics, physics, chemistry, biology, logic, and custom LaTeX notation.
• Math journey — a playful long-form progression from Class 1 arithmetic to PhD-level notation.
• Quadratic continuity — a focused benchmark for retaining unchanged equation pieces.

Start by copying reactive-world.manic, rename its steps around your idea, and replace one representation at a time. Keep the world; change the understanding.

Next: Navigate and export the story by stage →

Story stages — edit the idea, not the timestamp

A creator usually thinks in beats—question, intuition, experiment, proof, takeaway—rather than 6.35 seconds. Manic uses the names already written in step(...) as the editing and publishing structure for the movie. There is no second timeline file to maintain.

step("question") {
  show(prompt, 0.4);
  say(caption, "Where does the slope become zero?", 0.35);
}
wait(0.8);

step("experiment") {
  to(tangent, x, 0, 1.8, smooth);
  to(rate, x, 0, 1.8, smooth);
}
wait(0.7);

step("takeaway") {
  rewrite(work, `f'(0)=0`, 0.8, smooth);
}
wait(1.5);

The wait after a step belongs to that stage. This makes a stage export include the transition and the time the viewer needs to absorb its settled result. The next stage begins exactly where its next step begins.

See the story before opening a window

manic stages examples/reactive-world.manic

The report lists every stage’s start, end, and complete duration:

stages — examples/reactive-world.manic (5 stages, 13.55s authored)

  #  stage                  start      end      duration
  1  question                0.00s     2.15s      2.15s
  2  measure-slope           2.15s     5.95s      3.80s
  3  find-the-flat-point     5.95s     8.40s      2.45s
  4  see-the-derivative      8.40s    10.80s      2.40s
  5  takeaway               10.80s    13.55s      2.75s

Use this before recording to catch a rushed hook, an overlong setup, or a takeaway without enough reading time.

Preview one stage

manic examples/reactive-world.manic --stage find-the-flat-point

Manic evaluates the complete persistent world at the stage’s real start, then limits playback and scrubbing to that stage. Nothing is reconstructed as a separate scene, so incoming equation, plot, diagram, and parameter state remain correct.

The live player adds a stage strip above the transport bar:

• click a stage segment to jump to it;
• use 1–9 to jump to visible stages;
• press R to restart at the selected range’s beginning;
• drag the progress bar to scrub only inside the selected range;
• read the current stage and selected range in the HUD.

Record a single stage

The same flag selects the recording range:

manic examples/reactive-world.manic \
  --stage see-the-derivative \
  --record out-derivative \
  --preset reel

For a clean editing clip without the preset’s branding intro/outro:

manic examples/reactive-world.manic \
  --stage see-the-derivative \
  --record out-derivative \
  --preset test \
  --no-brand

Export several stages

Use an inclusive named range when a clip should carry a short story arc:

manic examples/reactive-world.manic \
  --from-stage measure-slope \
  --to-stage takeaway \
  --record out-slope-to-takeaway

--to-stage takeaway includes the whole takeaway stage. With only --from-stage, recording continues through the authored ending. With only --to-stage, it begins at the start of the movie.

Named ranges and numeric --from/--to are intentionally separate. Use stage names for story editing and numeric seconds only for a deliberately precise technical trim. Unknown names report the available stages and suggest a close match.

Recording metadata stays useful

markers.json now includes:

• the selected source range;
• clipped stage intervals with relative t, end, and duration;
• each stage’s original source_t;
• marks and sections filtered to the exported clip and shifted to clip time.

That means narration, captions, music cues, and downstream editing tools can work from zero-based clip timing without losing the position in the source story.

Combine stages with output formats

Stage selection and canvas selection are independent:

manic examples/parameter-journeys.manic --stage takeaway --canvas portrait  --record out-reel
manic examples/parameter-journeys.manic --stage takeaway --canvas square    --record out-square
manic examples/parameter-journeys.manic --stage takeaway --canvas landscape --record out-lesson

The named idea stays the same while the responsive layout changes. Before the batch render, run manic check examples/parameter-journeys.manic --canvas all to review every stage in every supported shape.

Choosing useful names

• Name the change in understanding: see-the-derivative, not show-pink-line.
• Keep a short video to roughly three to six stages.
• Put several synchronized changes inside one stage only when they explain the same idea.
• Add a deliberate wait after the important result.
• Use mark("cue") for an editor timestamp that is not a story stage.
• Use section("Part Two") when the video itself needs a visible chapter card.

Start with Reactive world, run manic stages examples/reactive-world.manic, and preview its find-the-flat-point stage.

Next: Review every format before publishing →

Visual checks — review every format before publishing

A responsive Manic story can share its content and timing across a Reel, feed post, square video, and landscape lesson. Before recording those versions, run one publishing audit:

manic check examples/reactive-multiformat.manic --canvas all

Manic rebuilds the source at four logical canvases—portrait, 4:5 feed, square, and 16:9 landscape—then checks the settled frame of every named story stage. A clean result looks like this:

ok — examples/reactive-multiformat.manic [portrait]: visual checks passed
ok — examples/reactive-multiformat.manic [feed]: visual checks passed
ok — examples/reactive-multiformat.manic [square]: visual checks passed
ok — examples/reactive-multiformat.manic [landscape]: visual checks passed
ok — examples/reactive-multiformat.manic: visual audit passed all 4 formats

Use this after the story and layout feel right, but before spending time on the final render.

What the first audit catches

Visual-check v1 reports four common publishing problems:

Each message names the format, story stage, time, and responsible entity, then suggests a practical fix:

warning [square · takeaway @ 8.45s]: `caption` overlaps `result`
  entities: `caption` and `result`
  suggestion: separate the entities, shorten/wrap the text, or reflow this format

The command exits unsuccessfully when it finds either an error or warning, so it can guard a publishing script or CI job. Ordinary manic check file.manic remains the fast parse-and-validation check. To validate only one responsive layout, keep using manic check file.manic --canvas square.

Why named steps improve the result

The audit reviews the settled state at the end of each step("name") (or marker-defined stage), not every frame of a transition. That avoids treating a deliberate entrance, exit, or equation rewrite crossfade as a layout failure. It also makes a diagnosis useful: takeaway tells you which idea needs fixing, not merely that something happened at 8.45 seconds.

If a file has no named stage, Manic checks its final authored frame. For a creator story, prefer meaningful names such as question, experiment, proof, and takeaway; they help editing, seeking, publishing, and review.

Fixes that stay reusable

When the audit finds a problem, preserve one responsive source:

• Position with w, h, cx, and cy instead of copying pixel coordinates between files.
• Give continuing content stable ids so a message points to the same entity in every stage.
• Shorten copy or use wrap(id, width) before reducing the type size.
• Use one small if h > 1.45*w { ... } else if w > 1.25*h { ... } else { ... } layout branch when the composition genuinely needs to reflow.
• Choose the correct Creator safe=shorts|reels|tiktok|clean profile. Use safezone(...) while previewing the protected area; it is a design guide, not content for the finished video.
• Leave enough room for the busiest settled stage, not only the opening frame.

The gold reference is reactive-multiformat.manic. It uses one timeline and passes the audit in all four formats.

What still needs human review

Visual-check v1 is intentionally conservative. It does not yet judge collision paths during transitions, camera-transformed world or 3D bounds, detached labels and links, reading speed, or whether an equation agrees mathematically with a plot. It also cannot decide whether the hierarchy is beautiful or the hook is compelling.

After the automated audit passes, preview the hook, busiest transition, result, and end hold at phone size. The command catches mechanical layout mistakes; the creator still owns clarity, rhythm, and taste.

Next: Animate one value through many connected views →

Parameter journeys — one value, many connected views

A parameter journey shows how an idea behaves across a family of cases. Instead of rebuilding the scene for “negative”, “zero”, and “positive”, declare one visible value, connect it to the existing world once, and animate only that value.

parameter(a, (cx, 140), -1.2, -1.5, 1.5, "a", 2);

plot(curve, (cx, 720), 110, 58, "x*x", (-3.3,3.3));
circle(point, (cx, 1200), 22);
counter(magnitude, (cx, 1360), 0, 2, "a² = ", "");

bind(a, curve, formula, "0.22*p*x*x");
bind(a, point, x, w*0.18, w*0.82);
bind(a, point, scale, "0.78+0.22*abs(p)");
bind(a, magnitude, value, "p*p");

step("flatten") {
  to(a, value, 0, 2.2, smooth);
}
step("opens-up") {
  to(a, value, 1.25, 2.4, smooth);
}

The plot, point, scale, number, and native parameter control move on the same continuous clock. Nothing is replaced and no scene construction is duplicated.

The three-part mental model

This pattern is domain-neutral. The parameter can be a quadratic coefficient, damping factor in a formula plot, probability, sample-size readout, geometric position, opacity comparison, colour phase, or any other scalar that makes the idea easier to see.

Declare the visible parameter

parameter(id, (x,y), initial, min, max, ["label"], [decimals]);

parameter produces a typeset numeric readout and a compact track/dot widget. The initial value must be inside a finite min..max range. Animated values are clamped to that range, which prevents an accidental journey from leaving the meaningful domain.

The whole widget is tagged id.widget, so it can enter with the rest of the story:

hidden(a.widget);
show(a.widget, 0.4);

It is an authored animation control, not an interactive slider in the exported video. Use ordinary to to move it; stateless evaluation keeps preview seeking and recording deterministic.

Connect with a responsive range

The simplest binding maps the parameter’s declared minimum and maximum onto two output values:

bind(a, point, x, w*0.18, w*0.82);
bind(a, label, opacity, 0.25, 1);
bind(a, arrow, angle, -25, 25);

This form is especially useful for positions because the endpoints are normal Manic expressions. w, h, cx, and cy are evaluated before the binding is created, so the same source can give each output format an appropriate range.

Connect with a formula

Use a string formula for a nonlinear relationship:

bind(a, point, scale, "0.8+0.2*abs(p)");
bind(a, result, value, "p*p");
bind(damping, wave, formula, "exp(-p*abs(x))*cos(4*x)");

Inside a binding formula, p is the live parameter. A plot-formula binding also provides x as the plot coordinate. The usual arithmetic, constants, and functions—sin, cos, exp, sqrt, abs, round, and others—work here.

Bindable properties are x, y, opacity, scale, angle, hue, value, trace, and a plot’s formula. A value target must be a counter. A formula target must be a plot.

When a plot formula changes, its existing tangent, normal, slope, area, integral, and moving mark views receive the new function before they recompute. That is the important reactive promise: the analysis stays mathematically tied to the curve the viewer sees.

Choose cases, not frames

Use named steps to describe meaningful cases:

step("underdamped") {
  to(damping, value, 0.12, 2.0, smooth);
  say(caption, "The oscillation survives for longer.", 0.35);
}
step("strong-damping") {
  to(damping, value, 0.85, 2.0, smooth);
  say(caption, "The same response now settles quickly.", 0.35);
}

The stage names should explain the cases to a human. The parameter supplies the continuous motion between them; bind keeps every connected view synchronized.

Creator design tips

• Follow one primary parameter per short scene. Several controls are possible, but the audience should know which value is changing.
• Connect two or three complementary representations—a formula and plot, a geometry and measurement, or a simulation curve and readout.
• Give the parameter a meaningful range. Avoid travelling through singular or irrelevant values merely because the engine allows them.
• Use responsive range bindings for positions and formula bindings for meaning.
• Hold the important cases briefly. Smooth motion reveals the trend; the hold lets the viewer name it.
• Keep stable ids. Parameter journeys are an extension of the persistent-world model, not a reason to create replacement scenes.
• Run manic check FILE.manic --canvas all after the journey is complete.

Complete example

Parameter journeys is the polished reference: one coefficient drives a quadratic, live tangent and slope, moving point, changing scale, and a² readout across portrait, feed, square, and landscape.

Current bindings target 2D entity properties and formula plots. Constructors that perform expensive build-time work—such as re-simulating a full physics system or changing the number of generated objects—remain build-time choices; represent those journeys with a formula/readout today rather than implying that Manic silently recomputed the model.

Next: Meet the shapes that make up the persistent world →

Shapes — the cast

Everything on screen is an entity with a name (its first argument). You declare shapes once; the name is how you address them later in the script.

The six primitives

Each line below is the whole call — copy it and tweak the numbers.

Plus composites: polygon / sector / annulus / pie (filled by default), arc / brace / ellipse (stroke only), and boolean regions (union / intersect / …).

▶ See it play: SHAPECRAFT — fill vs outlined, the cast, palette → become, spin-wound morph, a disc that splits into four colours → reunites → moves, and two-colour booleans.

Ordinary text is portable and shaped automatically

text, say, captions, labels, and kit-generated words use Manic’s embedded font engine. No machine font is consulted, and there is no font-selection DSL: choose only the semantic mono, bold, or display look. Manic handles fallback, ligatures, combining marks, bidirectional order, wrapping, reveal, rotation, glow, camera zoom, and recording from one shaped layout.

Arabic and Devanagari are bundled script examples, so these work unchanged in preview, backend recording, and the browser build:

text(arabic, (cx, 300), "التعلّم يجعل الأفكار واضحة");
text(hindi,  (cx, 420), "ज्ञान से प्रकाश मिलता है");

Use equation or inline $…$ for mathematical typesetting. Run manic check before rendering; an unsupported Unicode cluster names the entity and code point instead of silently drawing a replacement box. Colour emoji remains intentionally unsupported until colour-font rendering is portable.

Plus a few composite helpers built from those: polygon, arc/sector, brace/ bracelabel, caption (a row of words), and support(id, (cx,cy), [len], ["dir"]) — the hatched wall / ceiling / floor for mechanics & textbook diagrams ("dir" is the open side: "down" ceiling, "up" floor, "left"/"right" walls).

Two more helpers cover scenes that would otherwise need dozens of manual dots and endpoints:

circle(glass, (400,300), 100);
particles(bubbles, glass, 24, 5, 7); // default random layout

rect(tank, (750,300), 180, 160);
particles(samples, tank, 24, 4, 11, "grid");
link(pipe, glass, tank, 35);         // 35 px of curve; 0 is straight

circle(orbit, (980,300), 90);
particles(ticks, orbit, 24, 4, 13, "ring");

particles works inside circles and rectangles. Its bare id addresses every child dot, so hidden(bubbles) and recolor(bubbles, fg) affect the whole group. Use the optional "grid" layout for an ordered rectangular state, then arrange(samples, tank, "random", 2, smooth) to move the same dots into a typical random state. arrange may target a larger container for expansion and can return to "grid" exactly. A circle plus "ring" gives the particles an ordered radial endpoint. link meets shapes at their boundaries and stays attached when either endpoint moves.

Points are (x, y) in pixels, origin top-left, y increasing downward. Use cx, cy, w, h to stay canvas-independent.

For display mathematics, equation accepts LaTeX in backticks. Standard \textcolor can emphasize individual terms with Manic’s semantic palette; the colors automatically follow the selected template:

equation(step, (cx, 620),
  `\textcolor{magenta}{\mathrm{slope}}=
   \frac{\textcolor{cyan}{\mathrm{rise}}}
        {\textcolor{gold}{\mathrm{run}}}`, 40);

Leave a term uncolored to use the template foreground. A single-color equation can still be styled as one entity with color and animated with recolor.

For a derivation, keep that same equation id and animate only the change:

rewrite(step, `\mathrm{slope}=\frac{\mathrm{rise}}{\mathrm{run}}`, 0.9, smooth);
rewrite(step, `\mathrm{slope}=\frac{x}{1}`, 0.9, smooth);

Manic matches the rendered LaTeX parts; it does not perform algebra. This makes the verb generic across algebra, calculus, physics, sums, fractions, radicals, and creator scenes while keeping each settled formula exact.

// the six primitive shapes, drawn on together.
title("Shapes");
canvas("16:9");

text(t, (cx, 90), "six primitives");  color(t, cyan);  size(t, 32);  hidden(t);

circle(c, (240, 380), 80);            color(c, cyan);     stroke(c, 4);  untraced(c);
rect(r,   (470, 380), 150, 150);      color(r, magenta);  stroke(r, 4);  untraced(r);
line(l,   (640, 300), (820, 460));    color(l, lime);     stroke(l, 4);  untraced(l);
arrow(a,  (900, 460), (1040, 300));   color(a, cyan);     stroke(a, 4);  untraced(a);
dot(d,    (1110, 380), 12);           color(d, magenta);  hidden(d);
text(lbl, (640, 620), "circle · rect · line · arrow · dot · text");
color(lbl, dim);  size(lbl, 24);  hidden(lbl);

show(t, 0.5);
par { draw(c);  draw(r);  draw(l);  draw(a);  show(d); }
show(lbl, 0.5);
wait(1.2);

▶ See it play:

Modifiers — style a shape at t = 0

A shape starts plain. Modifiers change how it looks before the animation begins. They take the entity name first, then a value:

Textbook diagrams: prefer outlined (or a thin arc) for angle marks and “regions of interest.” A filled disc or sector sitting on top of axes and construction lines hides what’s underneath — even at low opacity. Reserve solid fills for backdrop wells behind the diagram, not overlays.

circle defaults to filled + outlined (neon UI). For math constructions always pair outlined(id) — outline(id, color) alone only recolors the rim and leaves the fill on. Contact points that land on crossings should be open / dashed rings (outlined + dashed), not dot — a solid marker paints over the intersection you are trying to show.

And two that decide how a shape first appears:

Colours are a fixed palette: fg, void, cyan, magenta, lime, gold, red, orange, blue, teal, violet, coral, indigo, mint, dim, panel. For a computed colour (say, one per item in a loop) use hue(id, degrees). More in Colour & style.

Naming things in a loop

When you make many shapes with a for loop, give each a unique name with interpolation — {expr} glued to the name:

for i in 0..5 {
  dot(p{i}, (200 + i*180, cy), 8);   // p0, p1, p2, p3, p4
}

That’s your cast. Now let’s make it move → Verbs.

Verbs — bringing it to life

Verbs are the script. Each one names an entity and animates it. They run top-to-bottom, one after another (use par for simultaneous).

Almost every verb takes two optional trailing arguments:

move(sun, (900, 400), 0.8, smooth);
//                     ^dur  ^easing

• [dur] — how long, in seconds (there’s a sensible default).
• [ease] — the motion curve: linear, smooth, in, out, back, bounce, elastic, spring (see Colour & style).

Reveal & hide

draw(sun, 1.2);   // -> trace a stroke on (needs `untraced` first)
erase(sun);       // -> the reverse: un-draw it
show(cap, 0.5);   // -> fade in (needs `hidden` first)
fade(cap);        // -> fade out
type(cap);        // -> typewriter: reveal text character by character

Attention

flash(sun, cyan);  // -> flash to a colour, then restore
pulse(sun);        // -> quick grow-and-settle "look here"
shake(sun);        // -> horizontal shake, an "error/no" gesture
spin(sun, 360);    // -> spin about its centre

Motion

move(p,  (900, 400));   // -> glide to an absolute point
shift(p, (0, -120));    // -> move by a delta (relative)
scale(r, 1.4);          // -> animate uniform scale to 1.4x
rotate(r, 45);          // -> rotate by 45 degrees
grow(arrow, (500, 200));// -> animate a line/arrow endpoint (draws or retargets)
cycle(x, y, z, 0.8, 90, smooth); // -> x→y→z→x along arcs

cycle(a, b, c, …, [dur], [arc], [ease]) moves every entity into the next one’s position and the last into the first. The path arc is in degrees and defaults to 90; pass 0 for straight paths. Repeated calls compose, making it useful for symbol rearrangements, card carousels, and CyclicReplace-style moves.

Relationship motion

Three verbs cover motion that would otherwise require many coordinated keyframes:

attach(label, marker, (0,-36));       // label follows marker
travel(marker, route, 2, smooth);
become(marker, nodeBlueprint, 0.8);   // same id, new visual state
attach(label, none);                  // release at the settled position
turn(nodeGroup, marker, 20, 0.6, out);// shared group pivot

attach is persistent until released. become interpolates compatible shapes and safely crossfades other pairs, always settling on the exact declared blueprint. turn accepts one entity or a tag and rotates its members around a point or entity pivot. See Motion graphics for the full design rules and a copyable V2 Reel.

Ambient motion and path flow

particles(bubbles, glass, 24, 5, 7);
link(pipe, glass, tank, 35);
untraced(pipe);

par {
  wander(bubbles, 6);              // always stays inside glass
  seq { draw(pipe); flow(pipe, 1); }
}

wander is deterministic: the same optional particle seed gives the same placement and motion in preview and in the final recording. It occupies the duration you give it, so run it in par with the story it should accompany. flow sends a temporary luminous pulse over any line, arrow, curve, spline, arc, or tracked link; it is useful for a signal, energy, traffic, or simply directing attention.

travel(marker, path, dur, smooth) moves the actual marker once along that same kind of path and leaves it at the endpoint. Use flow for temporary emphasis and travel when object identity and the stopping point matter:

plot(curve, (180,620), 90, 140, "1-exp(-x)", (0,4));
dot(marker, (180,620), 7);
par { draw(curve, 2, out); travel(marker, curve, 2, out); }

For a persistent layout change, keep the same particle ids:

rect(chamber, (540,500), 600, 260);
particles(gas, chamber, 48, 5, 17, "grid");
arrange(gas, chamber, "random", 2.5, smooth);
arrange(gas, chamber, "grid", 2.5, smooth); // exact ordered return

circle(orbit, (900,500), 150);
arrange(gas, orbit, "ring", 1.2, smooth);    // move and stop radially

arrange also accepts a different circle/rectangle container, which makes a free expansion readable without moving every dot by hand. A random layout uses independent seeded curved routes: the result is reproducible and scrubbable, but does not look like every particle followed the same ruler.

For a complete creator-oriented treatment of persistent motion, arrival, settling, and the difference between travel and flow, see Motion graphics — move ideas, not layers.

For shape continuity, morph(a,b) preserves topology: graph/line paths remain open, while circles and other closed outlines remain closed. This prevents an unwanted diagonal chord when a plot becomes a connector or guide line.

For a persistent comparison style, use dashed(id, [dash], [gap]) before the timeline. It is a base Manic modifier—not a calculus feature—so the same 16/10-pixel default pattern works on a plot, guide line, link, arrow, curve, spline, coil, or plain arc. Increase both values for a calmer large-format dash; keep the gap smaller than the dash when the curve must remain easy to follow.

Content & colour

say(cap, "next step");     // -> crossfade a text entity to new words
recolor(sun, lime, 0.5);   // -> permanently animate the colour

Rewrite an equation without rebuilding it

Declare one real LaTeX equation, then supply each mathematically correct state:

equation(work, (cx, 300), `x^2+2x=3`, 54);
rewrite(work, `x^2+2x+1=4`, 0.9, smooth);
rewrite(work, `(x+1)^2=4`, 0.9, smooth);
rewrite(work, `x=-1\pm2`, 0.9, smooth);

rewrite is visual, not a computer-algebra system: it never invents or verifies a step. Equal RaTeX parts retain identity and travel smoothly. Matching respects reading order, coarse layout roles—main line, exponent, numerator, denominator, fraction rule, and other structure—and RaTeX math-style depth. An identical character therefore cannot change mathematical jobs or jump between levels of a nested exponent. This also protects logarithm bases, operator limits, and derivative orders. If one side gains or loses fraction, radical, or grouping structure, that side leaves before the replacement enters while the compatible side and equality remain continuous. Globally incompatible states, such as a matrix becoming a compact formula, use a staged whole-equation dissolve with only a short, dim overlap. When unmatched source and target glyphs are a replacement, the old glyph leaves before the new one becomes readable; pure additions still enter immediately. Semantic \textcolor roles follow the authored formula, and the final frame is always the exact target LaTeX. No flag or alternate verb is required. Keep one equation id for the whole derivation, write readable steps, and use wait between them when the viewer needs time to absorb a result.

For a plot or diagram that changes with the same step, place rewrite and the related motion in par. Existing equations are unaffected unless this verb is used.

The escape hatch — to / set

Named verbs are shortcuts. to animates any single property, for whatever isn’t pre-named:

to(sun, opacity, 0.3, 0.5);   // animate opacity to 0.3 over 0.5s
to(sun, rot, 90);             // rotation to 90 degrees

Properties: pos, color, opacity, scale, rot, trace, hue.

Move the camera

cam((300, 200), 1.0);   // pan the camera centre
zoom(1.6, 0.8);         // zoom to 1.6x

The camera moves the whole world, so a caption or counter would slide off with it. Mark it sticky(id) to pin it to the screen and keep it readable through the move.

One verb, a whole group

If a name refers to a tag (a group) instead of a single entity, the verb runs on every member at once. This is how you animate a whole graph, table, or loop-generated set in one line:

hidden(g.nodes);     // every node, at t=0
draw(g.edges);       // trace every edge on together
flash(a.cells, cyan);// flash all array cells

More on grouping in the Kits chapter. Next, control when things happen → Timing.

Motion graphics — move ideas, not layers

Motion Graphics V2 is built around continuity. Keep one object alive while it moves, follows another object, changes visual form, joins a layout, or turns as part of a system. The timeline remains deterministic and freely scrubbable.

There is no V2 mode or production flag. Write an ordinary .manic file and use the relationship only where the story needs it.

The complete everyday vocabulary

The three V2 words add relationships; they do not replace move, travel, flow, arrange, spin, transform, rewrite, or morph.

One process, several truthful views

Use stream when the authored objects themselves should leave progressively. Use flow when only a temporary signal should pass. A process can drive more than one observer without manually synchronizing keyframes:

rect(source, (170,300), 210,230);
particles(packets, source, 42, 5, 17);
spline(route, (275,300), (410,140), (560,470), (720,285));

livehistogram(speeds, (980,335), 0.55, 1.05, 10, 430, 220, cyan);
counter(arrivals, (640,610), 0, 0, "arrived ", " / 42");

par {
  stream(packets, route, 4.2, 34, smooth);
  observe(speeds, packets, speed);
  observe(arrivals, packets, arrived);
}

Source order inside the par matters only for the build contract: write stream first so the following observers can read its compiled measurements. Playback still starts all three clips together. Seeking remains deterministic; the collection seed reproduces the same start order, travel times, endpoints, counter, and histogram.

speed uses normalized authored-path lengths per second rather than screen pixels, so changing the canvas or render scale does not change the measurement. arrival is elapsed seconds inside the process beat. A livehistogram requires an explicit range; observations outside it clamp to the end bins instead of silently changing the axis.

The minimal complete example is:

// PROCESS FOUNDATION — the smallest complete example.
// A real persistent collection streams along a path. Both observers read the
// compiled process measurements; neither is animated with guessed values.

title("A Collection Becomes a Process");
canvas("16:9");
template("blank");
watermark(mark, (170, 58), "Made With Manic");

text(kicker, (640, 52), "MANIC · DETERMINISTIC PROCESS");
text(headline, (640, 100), "One journey. Two truthful views.");
size(kicker, 18); color(kicker, dim); bold(kicker);
size(headline, 34); bold(headline);

rect(source, (170, 300), 210, 230);
outlined(source); outline(source, dim); stroke(source, 3);
text(sourceLabel, (170, 440), "persistent collection");
size(sourceLabel, 18); color(sourceLabel, dim);
particles(packets, source, 42, 5, 17);

spline(route, (275, 300), (410, 140), (560, 470), (720, 285));
stroke(route, 4); color(route, fg); untraced(route);

livehistogram(speeds, (980, 335), 0.55, 1.05, 10, 430, 220, cyan);
text(speedLabel, (980, 190), "normalized speed");
size(speedLabel, 20); bold(speedLabel);

counter(arrivals, (640, 610), 0, 0, "arrived ", " / 42");
size(arrivals, 25); color(arrivals, dim);
text(caption, (640, 665), "stream moves real objects · observe reads the same process");
size(caption, 20); color(caption, dim);

hidden(packets); hidden(speeds); hidden(arrivals); hidden(caption);

step("introduce") {
  par {
    show(packets, 0.45);
    draw(route, 0.65);
    show(speeds, 0.45);
    show(arrivals, 0.35);
    show(caption, 0.35);
  }
}
wait(0.35);

step("stream-and-observe") {
  par {
    stream(packets, route, 4.2, 34, smooth);
    observe(speeds, packets, speed);
    observe(arrivals, packets, arrived);
  }
}
wait(1.0);

Branching networks: author paths, keep the evidence

branch is the reusable one-of-many process. Tag ordinary paths into one network; the first and last points establish each edge’s direction:

line(entry, (100,260), (250,260)); tag(entry, routes);
line(a, (250,260), (430,120)); tag(a, routes);
line(b, (250,260), (430,260)); tag(b, routes);
line(c, (250,260), (430,400)); tag(c, routes);

livehistogram(destinations, (680,300), 0, 3, 3, 300, 240, cyan);
par {
  branch(requests, routes, 4, smooth);
  observe(destinations, requests, outcome);
}

The network must be connected and acyclic, with one root and at least two terminals. Paths may converge before splitting again. Each item makes the same seeded uniform choices in preview, recording, and direct frame seeking. Terminals are numbered left-to-right, then top-to-bottom; outcome is that number and steps is the number of edges traversed.

This is intentionally subject-neutral. The minimal example dispatches requests to workers; the polished example uses the same word for repeated left/right choices on a Galton board:

// GENERIC PROCESS BRANCHING — one source, three destinations.
//
// The paths carry no service semantics. `branch` only sees a directed acyclic
// network and makes one deterministic uniform choice at every fork. The same
// foundation drives the Galton-board example.

title("Process Branching — One Source, Three Destinations");
canvas("16:9");
template("blank");
watermark(mark, (145, 70), "Made With Manic");

text(head, (cx, 72), "One collection · many truthful routes");
text(sub, (cx, 112),
  "Every request keeps its identity, destination, step count, and arrival time.");
size(head, 32); bold(head);
size(sub, 19); color(sub, dim);

circle(source, (180, 340), 24);
color(source, panel); outline(source, cyan); stroke(source, 3);
particles(requests, source, 54, 4, 41);
color(requests, cyan); glow(requests, 0.7); z(requests, 8);

line(entry, (205, 340), (420, 340)); tag(entry, dispatchRoutes);
spline(upper, (420, 340), (530, 190), (680, 185)); tag(upper, dispatchRoutes);
line(middle, (420, 340), (680, 340)); tag(middle, dispatchRoutes);
spline(lower, (420, 340), (530, 490), (680, 495)); tag(lower, dispatchRoutes);
color(dispatchRoutes, dim); stroke(dispatchRoutes, 3); untraced(dispatchRoutes);

rect(worker0, (735, 185), 150, 82);
rect(worker1, (735, 340), 150, 82);
rect(worker2, (735, 495), 150, 82);
for i in 0..3 {
  color(worker{i}, panel); outline(worker{i}, cyan); stroke(worker{i}, 2);
}
text(w0, (735, 185), "worker 0");
text(w1, (735, 340), "worker 1");
text(w2, (735, 495), "worker 2");
size(w0, 18); size(w1, 18); size(w2, 18);

livehistogram(destinations, (1030, 350), 0, 3, 3, 330, 300, magenta);
text(histTitle, (1030, 170), "DESTINATION OUTCOME");
size(histTitle, 19); bold(histTitle); color(histTitle, dim);
counter(arrived, (1030, 555), 0, 0, "arrived  ", " / 54");
size(arrived, 21); color(arrived, dim);

text(caption, (cx, 650),
  "The diagram and histogram are two views of the same seeded dispatch.");
size(caption, 21); color(caption, dim);

hidden(requests); hidden(destinations); hidden(arrived); hidden(caption);

step("network") {
  par {
    draw(dispatchRoutes, 0.75);
    show(requests, 0.35);
    show(destinations, 0.45);
    show(arrived, 0.35);
    show(caption, 0.35);
  }
}
wait(0.35);

step("dispatch") {
  par {
    branch(requests, dispatchRoutes, 5.0, smooth);
    observe(destinations, requests, outcome);
    observe(arrived, requests, arrived);
    flow(dispatchRoutes, 5.0, forward, continuous);
  }
}
wait(1.0);

// GALTON BOARD — RANDOM LOCALLY, PREDICTABLE GLOBALLY
//
// This is a probability story built from generic process vocabulary. Ordinary
// tagged lines form the board; `branch` preserves each ball through eight
// choices; `collect` and `observe` build the distribution from real arrivals.

title("How Random Choices Become a Bell Curve");
canvas("9:16");
template("blank");

watermark(mark,(w*0.16,h*0.042),"Made With Manic");
text(kicker,(cx,h*0.070),"PROBABILITY · RANDOM LOCALLY, ORDERED GLOBALLY");
text(headline,(cx,h*0.115),"Can random choices create a predictable shape?");
text(chapter,(cx,h*0.195),"1 · BEGIN WITH ONE FORK");
text(caption,(cx,h*0.855),"One ball can land almost anywhere.");
text(insight,(cx,h*0.815),"MORE ROUTES LEAD TO THE CENTER");
text(cta,(cx,h*0.930),"MAKE PROBABILITY VISIBLE → 8gwifi.org/manic");

size(kicker,18); color(kicker,dim); bold(kicker); hidden(kicker);
size(headline,31); bold(headline); wrap(headline,w*0.84); hidden(headline);
size(chapter,19); color(chapter,cyan); bold(chapter); hidden(chapter);
size(caption,21); color(caption,dim); wrap(caption,w*0.84); hidden(caption);
size(insight,19); color(insight,lime); bold(insight); hidden(insight);
size(cta,21); color(cta,cyan); bold(cta); hidden(cta);

equation(law,(cx,h*0.158),`X\sim\operatorname{Binomial}\!\left(8,\frac12\right)`,29);
hidden(law);

let levels = 8;
let boardX = cx;
let topY = h*0.235;
let dx = w*0.065;
let dy = h*0.034;

// Every directed edge joins one row to the next. Converging endpoints create
// the ordinary rooted DAG followed by `branch`.
for r in 0..levels {
  for k in 0..r+1 {
    let x1 = boardX + (k-r*0.5)*dx;
    let y1 = topY + r*dy;
    let xl = boardX + (k-(r+1)*0.5)*dx;
    let xr = boardX + (k+1-(r+1)*0.5)*dx;
    let y2 = topY + (r+1)*dy;

    line(left{r}_{k},(x1,y1),(xl,y2));
    line(right{r}_{k},(x1,y1),(xr,y2));
    tag(left{r}_{k},boardRoutes); tag(right{r}_{k},boardRoutes);
    color(left{r}_{k},dim); color(right{r}_{k},dim);
    stroke(left{r}_{k},1.7); stroke(right{r}_{k},1.7);
    opacity(left{r}_{k},0.30); opacity(right{r}_{k},0.30);

    dot(peg{r}_{k},(x1,y1),4.8);
    color(peg{r}_{k},fg); glow(peg{r}_{k},0.36); tag(peg{r}_{k},pegs);
  }
}
untraced(boardRoutes);

for k in 0..levels+1 {
  let tx = boardX + (k-levels*0.5)*dx;
  let ty = topY + levels*dy;
  dot(exit{k},(tx,ty),5);
  color(exit{k},gold); glow(exit{k},0.45); tag(exit{k},exits);
  counter(bin{k},(tx,ty+28),k,0);
  size(bin{k},15); color(bin{k},dim); tag(bin{k},exitLabels);
}

text(leftChoice,(boardX-dx*0.72,topY+dy*0.72),"LEFT");
text(rightChoice,(boardX+dx*0.72,topY+dy*0.72),"RIGHT");
size(leftChoice,15); size(rightChoice,15);
color(leftChoice,cyan); color(rightChoice,magenta);
hidden(leftChoice); hidden(rightChoice);

circle(source,(boardX,topY),13);
opacity(source,0);
particles(balls,source,180,4.0,73);
color(balls,cyan); glow(balls,0.78); z(balls,9);

let histY = h*0.695;
livehistogram(outcomes,(cx,histY),0,9,9,w*0.76,h*0.155,magenta);
text(histTitle,(cx,h*0.595),"WHERE 180 BALLS ACTUALLY LANDED");
size(histTitle,18); bold(histTitle); color(histTitle,dim);
counter(landed,(cx,h*0.785),0,0,"landed  "," / 180");
size(landed,21); color(landed,dim);

hidden(pegs); hidden(exits); hidden(exitLabels);
hidden(balls); hidden(outcomes); hidden(histTitle); hidden(landed);

step("introduce one uncertain choice") {
  par {
    show(kicker,0.30);
    show(headline,0.45);
    show(law,0.45);
    show(chapter,0.35);
    show(caption,0.40);
    draw(boardRoutes,0.90);
    show(pegs,0.55);
    show(exits,0.45);
    show(exitLabels,0.45);
    show(leftChoice,0.35);
    show(rightChoice,0.35);
  }
}
wait(0.60);

step("repeat the choice eight times") {
  par {
    show(outcomes,0.50);
    show(histTitle,0.35);
    show(landed,0.35);
    say(chapter,"2 · REPEAT LEFT OR RIGHT EIGHT TIMES",0.38);
    say(caption,"At every peg, each ball makes another equally likely left-or-right choice.",0.44);
  }
}
wait(0.55);

step("let the crowd reveal the pattern") {
  par {
    branch(balls,boardRoutes,8.20,smooth);
    collect(outcomes,balls,outcome,0.34,smooth);
    observe(outcomes,balls,outcome);
    observe(landed,balls,arrived);
    show(balls,0.15);
    seq {
      say(chapter,"3 · WATCH 180 INDIVIDUAL JOURNEYS",0.38);
      say(caption,"One route is unpredictable. The crowd begins to expose a stable pattern.",0.44);
      wait(3.40);
      say(caption,"Every bar is measured from the same balls you see falling—not animated separately.",0.44);
    }
  }
}
wait(0.65);

step("explain why the center wins") {
  par {
    pulse(outcomes.bars,0.80);
    show(insight,0.45);
    say(chapter,"4 · ORDER EMERGES FROM MANY CHOICES",0.38);
    say(caption,"Extreme bins need nearly all-left or all-right. Many more mixed sequences end near the center.",0.48);
  }
}
wait(0.75);

step("create with Manic") {
  par {
    pulse(outcomes.bars,0.75);
    show(cta,0.45);
    say(caption,"Describe the choices once. Manic keeps every route, arrival, count, and live distribution connected.",0.45);
  }
}
wait(1.45);

The first scientific acceptance story uses exactly the same generic words for molecular motion:

// MAXWELL–BOLTZMANN PROCESS FOUNDATION
// First acceptance story for deterministic evolving collections. The emitted
// particles, arrival count, and speed histogram all come from one compiled
// process. The formula is authored truth; Manic is not pretending to be a CAS.

title("Maxwell–Boltzmann — From Motion to Distribution");
canvas("9:16");
template("blank");
watermark(mark, (155, 92), "Made With Manic");

text(kicker, (540, 80), "STATISTICAL MECHANICS · PROCESS VIEW");
text(headline, (540, 145), "How does molecular motion become a distribution?");
size(kicker, 19); color(kicker, dim); bold(kicker);
size(headline, 33); bold(headline); wrap(headline, 850);

equation(law, (540, 245),
  `f(v)=4\pi\left(\frac{m}{2\pi k_BT}\right)^{3/2}v^2e^{-mv^2/(2k_BT)}`, 36);

rect(reservoir, (410, 500), 560, 330);
outlined(reservoir); outline(reservoir, dim); stroke(reservoir, 4);
line(divider, (630, 340), (630, 660));
color(divider, dim); stroke(divider, 3);
text(gasLabel, (330, 685), "seeded molecules");
size(gasLabel, 20); color(gasLabel, dim);
particles(molecules, reservoir, 72, 5, 29);

// The route starts at the aperture and bends into the measurement region.
spline(nozzle, (630, 500), (735, 430), (850, 570), (900, 735));
stroke(nozzle, 4); color(nozzle, fg); untraced(nozzle);
text(nozzleLabel, (850, 395), "effusive path");
size(nozzleLabel, 19); color(nozzleLabel, dim);

livehistogram(speedBins, (540, 1160), 0.35, 0.95, 14, 760, 300, cyan);
text(histTitle, (540, 970), "EMPIRICAL SPEEDS");
size(histTitle, 23); bold(histTitle);
text(axisUnit, (540, 1355), "normalized path lengths per second");
size(axisUnit, 18); color(axisUnit, dim);

counter(arrived, (540, 1460), 0, 0, "detected molecules  ", " / 72");
size(arrived, 24); color(arrived, dim);
text(caption, (540, 1545),
  "Each bar grows only when a molecule from the same process arrives.");
size(caption, 22); color(caption, dim); wrap(caption, 820);

hidden(molecules); hidden(speedBins); hidden(arrived); hidden(caption);
hidden(nozzleLabel);

step("reservoir") {
  par {
    show(molecules, 0.55);
    show(speedBins, 0.45);
    show(arrived, 0.35);
    show(caption, 0.35);
  }
}
wait(0.45);

step("open-the-aperture") {
  par {
    draw(nozzle, 0.55);
    show(nozzleLabel, 0.35);
  }
}
wait(0.25);

step("motion-becomes-data") {
  par {
    stream(molecules, nozzle, 5.2, 42, smooth);
    observe(speedBins, molecules, speed);
    observe(arrived, molecules, arrived);
    say(caption,
      "The motion and the distribution are two views of one deterministic experiment.",
      0.45);
  }
}
wait(0.7);

step("takeaway") {
  par {
    pulse(speedBins.bars, 0.8);
    say(caption,
      "Manic can now connect a changing collection to measurements without frame callbacks.",
      0.45);
  }
}
wait(1.2);

V2: emission becomes evidence

stream is ideal when a collection should share one authored journey. Use emit when individual sampled speeds are the explanation. Add collect when the particles themselves should settle into the measured bins:

particles(molecules, source, 180, 3.2, 73);
livehistogram(empirical, (730,560), 0, 2.2, 14, 540, 240, cyan);

par {
  emit(molecules, flight, maxwell, 7.0, 48, smooth);
  collect(empirical, molecules, speed, 0.48, smooth);
  observe(empirical, molecules, speed);
  observe(arrivals, molecules, arrived);
}

The calls are written in dependency order because each later call reads the compiled process produced before it. They still play simultaneously inside the par. maxwell is a normalized speed profile, not a thermodynamics solver: the creator supplies temperature, units, and explanatory notation. Manic truthfully samples the distribution, preserves particle identity, makes faster samples travel sooner, catches each item in its matching bin, and reproduces the same result from the collection seed.

Decorative fidelity remains separate from process truth. The acceptance story uses the bundled native-vector reservoir asset for the apparatus while its particles, theoretical curve, empirical bars, and counters remain ordinary Manic entities:

// EXPRESSIVE PROCESS V2 — MAXWELL–BOLTZMANN EFFUSION
//
// A polished 2.5D acceptance story inspired by engine-test-6.mov. The
// apparatus is a bundled native SVG, while every molecule, detector bin,
// arrival count, and empirical distribution remains a normal Manic entity.
// `emit`, `collect`, and `observe` all read one deterministic process.

title("Maxwell–Boltzmann Effusion — Motion Becomes Evidence");
canvas("9:16");
template("blank");
watermark(mark, (150, 90), "Made With Manic");

text(kicker, (540, 84), "STATISTICAL MECHANICS · EXPRESSIVE PROCESS V2");
text(headline, (540, 142), "A distribution you can watch forming");
size(kicker, 18); color(kicker, dim); bold(kicker);
size(headline, 34); bold(headline);

equation(law, (540, 242),
  `f(v)=4\pi\left(\frac{m}{2\pi k_BT}\right)^{3/2}v^2e^{-mv^2/(2k_BT)}`, 34);

// The decorative shell is an asset; the changing evidence stays native.
svg(apparatus, (240, 540), "asset:svg/physics/effusion-reservoir.svg", 330);
text(reservoirLabel, (225, 705), "THERMAL RESERVOIR");
size(reservoirLabel, 17); bold(reservoirLabel); color(reservoirLabel, gold);

rect(detectorPanel, (730, 560), 570, 300);
filled(detectorPanel); color(detectorPanel, panel); opacity(detectorPanel, 0.92);
outlined(detectorPanel); outline(detectorPanel, dim); stroke(detectorPanel, 3);

text(detectorTitle, (730, 382), "PARTICLE SPEED  v");
size(detectorTitle, 18); bold(detectorTitle); color(detectorTitle, dim);

// The invisible source is precisely at the SVG nozzle.
circle(source, (348, 540), 20);
opacity(source, 0);
particles(molecules, source, 180, 3.2, 73);
color(molecules, magenta); glow(molecules, 0.8); z(molecules, 8);

// Individual lanes diverge around this authored route before being collected.
spline(flight, (350, 540), (415, 500), (465, 515), (500, 545));
hidden(flight);

livehistogram(empirical, (730, 560), 0, 2.2, 14, 540, 240, cyan);
z(empirical, 3); hidden(empirical.count);

// Same horizontal range as the live histogram: 0 .. 4*scale = 2.2.
distribution(theory, (730, 560), "maxwell", 0.55, 0, gold);
hidden(theory.axis); hidden(theory.name);
untraced(theory.curve); z(theory, 7);

text(empiricalKey, (610, 750), "● empirical arrivals");
text(theoryKey, (850, 750), "— theoretical curve");
size(empiricalKey, 17); color(empiricalKey, cyan);
size(theoryKey, 17); color(theoryKey, gold);

counter(arrivals, (540, 850), 0, 0, "detected molecules  ", " / 180");
size(arrivals, 24); color(arrivals, dim);

text(caption, (540, 920),
  "A thermal source emits many molecular speeds—not one average speed.");
size(caption, 23); wrap(caption, 880); color(caption, dim);

rect(evidencePanel, (540, 1110), 880, 230);
filled(evidencePanel); color(evidencePanel, panel); opacity(evidencePanel, 0.95);
outlined(evidencePanel); outline(evidencePanel, dim); stroke(evidencePanel, 2);
text(evidenceTitle, (540, 1030), "ONE PROCESS · THREE VIEWS");
size(evidenceTitle, 18); bold(evidenceTitle); color(evidenceTitle, dim);
equation(processLaw, (540, 1100),
  `\text{motion}\;\longrightarrow\;\text{arrival bin}\;\longrightarrow\;\hat f(v)`, 32);
text(truth, (540, 1190),
  "The dots, bars, and count are derived from the same seeded experiment.");
size(truth, 20); color(truth, dim); wrap(truth, 790);

hidden(apparatus); hidden(reservoirLabel); hidden(detectorPanel);
hidden(detectorTitle); hidden(molecules); hidden(empirical);
hidden(empiricalKey); hidden(theoryKey); hidden(arrivals);
hidden(caption); hidden(evidencePanel); hidden(evidenceTitle);
hidden(processLaw); hidden(truth);

step("build-the-apparatus") {
  par {
    show(apparatus, 0.65);
    show(reservoirLabel, 0.45);
    show(detectorPanel, 0.55);
    show(detectorTitle, 0.35);
    show(empirical.axis, 0.55);
    show(empirical.bars, 0.55);
    show(empirical.min, 0.35);
    show(empirical.max, 0.35);
    show(empiricalKey, 0.35);
    show(theoryKey, 0.35);
    show(arrivals, 0.35);
    show(caption, 0.40);
  }
}
wait(0.45);

step("the-prediction") {
  par {
    draw(theory.curve, 0.9, smooth);
    say(caption,
      "Maxwell predicts a characteristic spread with a most probable speed.",
      0.40);
    par {
      cam((cx, cy), 0.75, smooth);
      zoom(1.025, 0.75, smooth);
    }
  }
}
wait(0.35);

step("run-the-experiment") {
  par {
    emit(molecules, flight, maxwell, 7.0, 48, smooth);
    collect(empirical, molecules, speed, 0.48, smooth);
    observe(empirical, molecules, speed);
    observe(arrivals, molecules, arrived);
    show(molecules, 0.15);
    say(caption,
      "Each molecule keeps its sampled speed. Faster molecules cross the apparatus sooner.",
      0.45);
  }
}
wait(0.55);

step("motion-becomes-evidence") {
  par {
    pulse(empirical.bars, 0.8);
    show(evidencePanel, 0.40);
    show(evidenceTitle, 0.35);
    show(processLaw, 0.45);
    show(truth, 0.40);
    say(caption,
      "Collection does not fake the chart: every arrival lands in the bin selected by its speed.",
      0.45);
    par {
      cam((cx, cy), 0.65, smooth);
      zoom(1.0, 0.65, smooth);
    }
  }
}
wait(1.4);

Parameterized fields: change the rule, then release the tracers

A field is ordinary visible Manic geometry. Keep a familiar named field, or replace its components with formulas in mathematical coordinates:

vectorfield(flow, (640,365), 375,190, uniform, 17);
parameter(mix, (640,610), 0, 0, 1, "vortex mix", 2);
bind(mix, flow, formula, "(1-p)*1.15-p*y", "p*x");

step("wind-becomes-vortex") {
  to(mix, value, 1, 2.5, smooth);
}
step("release-tracers") {
  advect(tracers, flow, 4.4, 0.78);
}

Here x and y are field coordinates and p is the parameter. Every arrow updates from the same formula. advect then compiles each persistent tracer’s journey through the settled field, so preview, recording, and direct seeking agree. The optional rate controls distance travelled without changing the beat duration. Reaching the field boundary safely stops a tracer.

This first slice intentionally does not infer fluid mechanics, collision behavior, obstacles, or domain meaning. It gives creators one reusable visual relationship.

// PARAMETERIZED VECTOR FIELD — one value changes the whole field.
// The same settled field then moves a persistent tracer collection. No frame
// callbacks and no manually authored particle paths are involved.

title("From Wind to Vortex");
canvas("16:9");
template("mono");
watermark(mark, (170, 55), "Made With Manic");

text(kicker, (640, 48), "MANIC · PARAMETERIZED FIELD");
text(headline, (640, 94), "One parameter reshapes every arrow");
size(kicker, 18); color(kicker, dim); bold(kicker);
size(headline, 34); bold(headline);

rect(chamber, (640, 365), 780, 410);
outlined(chamber); outline(chamber, dim); stroke(chamber, 3);

// The initial named field supplies a clear first state. `bind` then gives it
// formula components where x,y are field coordinates and p is the parameter.
vectorfield(flow, (640, 365), 375, 190, uniform, 17);
parameter(mix, (640, 610), 0, 0, 1, "vortex mix", 2);
bind(mix, flow, formula, "(1-p)*1.15-p*y", "p*x");

circle(seed, (640, 365), 128);
outlined(seed); outline(seed, dim); dashed(seed, 10, 9);
particles(tracers, seed, 32, 5, 31, "random");
color(tracers, fg); glow(tracers, 0.55);

text(caption, (640, 678), "p = 0: steady wind");
size(caption, 20); color(caption, dim);

untraced(flow); hidden(seed); hidden(tracers);

step("reveal-the-field") {
  par {
    draw(flow, 0.9);
    show(seed, 0.4);
    show(tracers, 0.55);
  }
}
wait(0.5);

step("wind-becomes-vortex") {
  par {
    to(mix, value, 1, 2.5, smooth);
    say(caption, "p = 1: the same field turns into a vortex", 0.4);
  }
}
wait(0.55);

step("release-tracers") {
  par {
    advect(tracers, flow, 4.4, 0.78);
    say(caption, "The dots follow the settled field — their paths were never drawn.", 0.4);
  }
}
wait(1.2);

The same vocabulary can tell an optimization story without teaching the engine what “gradient descent” means:

// GRADIENT DESCENT AS A LEARNING STORY
// Twelve guesses begin without the answer. Every arrow supplies one local
// correction, and the same authored field carries all of them to one minimum.

title("How a Wrong Guess Learns");
canvas("9:16");
template("blank");

watermark(mark,(w*0.16,h*0.045),"Made With Manic");
text(kicker,(cx,h*0.075),"GRADIENT DESCENT · LEARNING AS MOTION");
text(headline,(cx,h*0.125),"How does a wrong guess find the minimum?");
text(chapter,(cx,h*0.265),"1 · START ANYWHERE");
text(caption,(cx,h*0.78),"Twelve guesses begin with no map of the whole landscape.");
text(result,(cx,h*0.715),"12 STARTING POINTS  →  1 SHARED MINIMUM");
text(cta,(cx,h*0.91),"MAKE LEARNING VISIBLE → 8gwifi.org/manic");

size(kicker,18); color(kicker,dim); bold(kicker); hidden(kicker);
size(headline,32); bold(headline); wrap(headline,w*0.84); hidden(headline);
size(chapter,19); color(chapter,cyan); bold(chapter); hidden(chapter);
size(caption,21); color(caption,dim); wrap(caption,w*0.84); hidden(caption);
size(result,19); color(result,lime); bold(result); hidden(result);
size(cta,21); color(cta,cyan); bold(cta); hidden(cta);

equation(lossRule,(cx,h*0.205),`L(x,y)=\frac{1}{2}x^2+y^2`);
size(lossRule,34); color(lossRule,fg); hidden(lossRule);

let fieldY = h*0.49;
rect(domain,(cx,fieldY),w*0.82,h*0.40);
outlined(domain); outline(domain,dim); stroke(domain,3);
hidden(domain);

// -grad L = (-x,-2y). The gentler vertical coefficient keeps the motion
// readable while preserving the elliptical convergence of the loss bowl.
vectorfield(descent,(cx,fieldY),w*0.37,h*0.175,"-x","-1.6*y",17);
untraced(descent);

circle(starts,(cx,fieldY),w*0.255);
outlined(starts); outline(starts,dim); dashed(starts,12,10);
hidden(starts);

particles(guesses,starts,12,8,73,"ring");
color(guesses,magenta); glow(guesses,0.78);
hidden(guesses);

circle(minimum,(cx,fieldY),14);
filled(minimum); color(minimum,lime); glow(minimum,1.0);
hidden(minimum);

circle(targetRing,(cx,fieldY),44);
outlined(targetRing); outline(targetRing,lime); stroke(targetRing,3);
hidden(targetRing);

text(minLabel,(cx,fieldY+74),"minimum");
size(minLabel,19); color(minLabel,lime); bold(minLabel); hidden(minLabel);

step("begin with imperfect guesses") {
  par {
    show(kicker,0.30);
    show(headline,0.45);
    show(lossRule,0.45);
    show(chapter,0.35);
    show(caption,0.40);
    show(domain,0.45);
    show(starts,0.45);
    show(guesses,0.60);
  }
}
wait(0.65);

step("reveal one local clue everywhere") {
  par {
    draw(descent,1.10);
    fade(starts,0.45);
    say(chapter,"2 · READ THE LOCAL SLOPE",0.35);
    say(caption,"Every arrow gives one instruction: move opposite the local gradient.",0.42);
  }
}
wait(0.55);

step("improve one small step at a time") {
  par {
    advect(guesses,descent,6.80,0.32);
    seq {
      say(chapter,"3 · FOLLOW THE CORRECTIONS",0.35);
      say(caption,"Far away, the correction is large. Near the bottom, each adjustment becomes smaller.",0.42);
      wait(3.05);
      say(caption,"Different starting points take different journeys—but obey the same rule.",0.42);
    }
  }
}
wait(0.55);

step("discover the shared destination") {
  par {
    show(minimum,0.35);
    show(targetRing,0.40);
    show(minLabel,0.35);
    show(result,0.45);
    say(chapter,"4 · ARRIVE WITHOUT TELEPORTING",0.35);
    say(caption,"Gradient descent is not a jump to the answer. It is repeated, measured improvement.",0.42);
    seq {
      pulse(targetRing,0.70);
      pulse(guesses,0.70);
    }
  }
}
wait(0.75);

step("create with Manic") {
  par {
    pulse(minimum,0.75);
    show(cta,0.45);
    say(caption,"Describe the rule once. Manic keeps every guess, arrow, correction, and learning step connected.",0.45);
  }
}
wait(1.45);

Manic does not infer the subject

An icon, label, or filename never changes motion semantics. Manic does not know that an object represents a load balancer, queue, topic, photon, vehicle, blood cell, or decorative spark. The creator supplies that meaning through ordinary composition:

// One selected route
par { travel(packet, lane2, 1.2, smooth); flow(lane2, 1.2); }

// Three authored deliveries together
par {
  travel(copy1, lane1, 1.0, smooth);
  travel(copy2, lane2, 1.0, smooth);
  travel(copy3, lane3, 1.0, smooth);
}

// A path connected to nothing—motion used purely as design
flow(ribbon, 4.0, both, continuous);

seq creates an authored order. par creates simultaneous motion. travel moves any ordinary 2-D entity and preserves its identity. flow requires only a path; it does not require endpoints, architecture metadata, or an object to carry. Tags let one flow address several paths when the creator wants them to act together.

attach — author the relationship

dot(marker, (180,620), 8);
text(readout, (180,580), "sample A");
plot(curve, (180,620), 90,140,"1-exp(-x)",(0,4));

attach(readout, marker, (0,-40));
travel(marker, curve, 2, smooth);
attach(readout, none); // release at the settled endpoint

The child follows after normal tracks, reactive bindings, derived geometry, links, particle layouts, and path travel have resolved. Its opacity is multiplied by the target opacity, so a label naturally disappears with the thing it explains.

Use an offset to keep the child readable. Release at the end of a movement, then move, fade, or reuse the child normally. Attachment cycles are rejected while building the movie rather than failing during rendering.

become — preserve identity across a visual change

Declare the destination like any other entity and hide it when it is only a blueprint:

circle(seed, (220,700), 16); color(seed, cyan);
circle(node, (820,700), 62); color(node, magenta);
outlined(node); stroke(node, 7); hidden(node);

become(seed, node, 0.9, smooth);

Compatible geometry interpolates continuously, including circle, rectangle, line, arrow, curve, coil, arc, and equal-topology polygon/polyline pairs. Unsupported pairs use a local fade/swap/fade instead of producing broken geometry. Both paths settle on the exact target geometry and styling while the source id remains alive. A hidden blueprint does not make the transformed source disappear, and the blueprint’s own visibility is never changed.

Use rewrite for equations because it understands matching LaTeX visual parts. After the mathematical transformation has settled, disintegrate(eq, 1.2) can release the rendered equation as deterministic dust. It samples the actual alpha silhouette; it is not a rectangular confetti overlay. The same treatment also works on images and vector shapes, so it remains motion-graphics vocabulary rather than a math-only effect.

equation(work,(cx,cy),`\int_0^1 3x^2\,dx`,64);
rewrite(work,`\left[x^3\right]_0^1=1`,1.0,smooth);
disintegrate(work,1.3);

Use morph plus to(..., morph, ...) when you explicitly need a fraction-driven point morph or winding angle.

turn — rotate the system, not every member

circle(orbit, (540,700), 220); hidden(orbit);
particles(dots, orbit, 16, 7, 42, "ring");

turn(dots, orbit, 24, 0.65, out);

The first argument may be one entity or a tag. The pivot may be a point or an entity. Positions follow circular paths, path endpoints and curve controls turn with their paths, and ordinary shapes retain their group-local orientation. Because the target is resolved from the latest authored state, turn composes after move, travel, arrange, or an earlier turn without snapping back.

Use spin for one object’s in-place rotation. Use transform when the actual idea is a matrix, shear, reflection, or other precise linear map.

travel versus flow

par {
  draw(curve, 2, out);
  travel(marker, curve, 2, out); // the marker moves and stays
  flow(curve, 1);                // temporary travelling emphasis
}

Use travel for a vehicle, probe, token, particle, or graph marker. Use flow for energy, attention, traffic, or a signal that should disappear after passing. The default remains one forward pulse. For sustained activity use flow(curve, 4, forward, continuous); Manic chooses length-aware complete cycles, so the stream begins empty and drains cleanly at the end. Use flow(curve, 1, reverse, once) for generic reverse motion and both for two independent opposing streams.

Motion-flow foundation example

This example proves the same vocabulary across four different intentions: one selected path, three motions authored in order, three motions authored together, and a free spline used only as visual design.

// 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);

Run it directly or audit every target format:

manic examples/motion-flow-foundation.manic
manic check examples/motion-flow-foundation.manic --canvas all

Complete V2 example

This generic Reel demonstrates all three relationship words, release, path travel, an identity-preserving blueprint change, particle arrangement, a shared pivot turn, and a readable final hold:

// 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);
  }
}

Run it directly—no extra runtime option is required:

manic examples/motion-graphics-v2.manic

Advanced story — compose the whole motion language

The compact example above answers “what do the three new words do?” This advanced Reel answers the more important creator question: “how do they form a story with the motion vocabulary I already know?”

It keeps one visual world alive across three acts:

1. A question travels while its label stays attached; a path pulse guides the eye and surrounding facts wander.
2. The notation rewrites, the same question becomes a model, and the same facts arrange into a system. The model then spins locally.
3. Labels and particles turn around one shared pivot while the equation reaches the story’s final meaning.

seq creates cause and effect, par groups changes that express one idea, and stagger prevents a dense scene from arriving as a visual shock.

// 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);
  }
}

Run the advanced story through the same file-only production path:

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

The original essentials example remains useful when learning wander, travel, explicit morph, and particle arrangement:

// motion-graphics.manic — persistent objects, paths, particles, and a clean settle

title("Motion Graphics Essentials");
canvas("9:16");
template("mono");
watermark(manicMark, (150, 145), "Made With Manic");

let accent = 194;
let warm = 38;

text(kicker, (540, 170), "MOTION GRAPHICS");
size(kicker, 24); color(kicker, dim);
text(headline, (540, 245), "Keep the object. Change its state.");
size(headline, 42);

rect(chamber, (540, 535), 700, 300);
outline(chamber, dim); outlined(chamber); stroke(chamber, 3);
rect(startCell, (350, 535), 290, 270); hidden(startCell);
particles(dots, startCell, 36, 6, 23);
hue(dots, accent, 0.58, 0.72); glow(dots, 0.7);
text(note, (540, 835), "random layout · organic deterministic routes");
size(note, 25); color(note, dim);

plot(path, (245, 1120), 145, 175, "1-exp(-1.4*x)", (0, 3.8));
hue(path, warm, 0.60, 0.70); stroke(path, 5); untraced(path);
dot(marker, (245, 1120), 9); color(marker, fg); glow(marker, 1.0);
text(pathNote, (540, 1215), "travel moves the real marker — then it stays");
size(pathNote, 25); color(pathNote, dim);

line(connector, (245, 1120), (835, 850)); hidden(connector);
plot(pathMorph, (245, 1120), 145, 175, "1-exp(-1.4*x)", (0, 3.8));
hue(pathMorph, warm, 0.60, 0.70); stroke(pathMorph, 5);
morph(pathMorph, connector); hidden(pathMorph);

circle(orbit, (540, 535), 245); hidden(orbit);

step("scatter") {
  seq {
    par {
      seq { arrange(dots, chamber, "random", 1.25, out); wander(dots, 1.75); }
      seq { wait(0.25); say(note, "same dots · natural motion · repeatable render", 0.45); }
    }
  }
}

step("follow-a-path") {
  seq {
    par {
      draw(path, 2.4, smooth);
      travel(marker, path, 2.4, smooth);
    }
    wait(0.45);
  }
}

step("preserve-the-path") {
  seq {
    par {
      fade(path, 0.20);
      show(pathMorph, 0.10);
      to(pathMorph, morph, 1, 0.90, smooth);
      say(pathNote, "morph keeps an open path open", 0.45);
    }
    wait(0.45);
  }
}

step("arrive-and-settle") {
  seq {
    par {
      arrange(dots, orbit, "ring", 1.15, smooth);
      fade(chamber, 0.35);
      seq { wait(0.45); say(note, "ring arrival", 0.35); }
    }
    par {
      transform(dots, (540,535), 0.9659, -0.2588, 0.2588, 0.9659, 0.50, out);
      say(note, "brief motion → a deliberate stop", 0.35);
    }
    wait(1.20);
  }
}

Professional motion checklist

• Author relationships and final states; avoid hand-keyframing intermediate coordinates.
• Use par for changes that belong to one idea and seq for cause-and-effect.
• Prefer smooth for explanatory transformations and out for a short settle.
• Keep an important object id alive instead of fading it out and rebuilding it.
• Leave a final wait so the audience can read the state motion created.
• Preview by named step and scrub backwards: the same time must always produce the same frame.

Timing — flow, named phases & clocks

By default, verbs play one after another. Three wrappers change that — they turn “then, then, then” into “together” or “cascading”.

show(a);  show(b);              // a, THEN b
par    { show(a);  show(b); }   // a and b together
stagger(0.1) { show(a); show(b); show(c); }  // a, then b 0.1s later, then c…

Put a for loop inside one and it just works — the loop expands first, so all its statements land in the wrapper:

par          { for i in 0..6 { show(a{i}); } }   // whole row at once
stagger(0.1) { for i in 0..6 { show(b{i}); } }   // whole row cascading

// the same reveal, three ways: sequence, together, cascade.
title("Timing");  canvas("16:9");
text(t, (cx, 110), "seq  ·  par  ·  stagger");  color(t, cyan);  size(t, 30);  hidden(t);

for i in 0..6 { dot(a{i}, (220 + i*160, 300), 16);  color(a{i}, cyan);     hidden(a{i}); }
for i in 0..6 { dot(b{i}, (220 + i*160, 470), 16);  color(b{i}, magenta);  hidden(b{i}); }

show(t, 0.5);

// top row, all at the same instant
par { for i in 0..6 { show(a{i}); } }
wait(0.5);

// bottom row, cascading 0.1s apart
stagger(0.1) { for i in 0..6 { show(b{i}); } }
wait(1.0);

▶ See it play:

Beats & sections

Two more timing words structure a longer video:

wait(1.2);              // hold — nothing moves for 1.2s
section("Part Two");    // a titled marker (jump to it in preview with keys 1–9;
                        //   also exported for lining up narration)
mark("beat-3");         // a named timestamp for your editor

wait is your friend for pacing — a beat of stillness after something lands reads far better than rushing to the next move.

Named reactive steps

Use step when a beat represents the world’s next conceptual state, not just anonymous timing. Its children start together like par; its duration is the longest child; anything not mentioned remains exactly as it was. The unique name is written to markers.json and becomes a first-class editing boundary: manic stages FILE.manic lists durations, --stage NAME previews or records one stage, and --from-stage / --to-stage export an inclusive arc.

step("explain") {
  rewrite(work, `f'(x)=2x`, 0.9, smooth);
  to(tangent, x, 2.5, 2.0, smooth);
  to(slopeValue, x, 2.5, 2.0, smooth);
  say(caption, "Every representation changes together.");
}

Steps are top-level and names must be non-empty and unique. Put seq { … } inside a step when a small part needs ordered choreography.

An authored wait after a step remains part of that stage until the next step begins. This lets a stage-only export keep the reading hold after its motion. See Story stages for the live navigator and publishing workflow.

Generic Timing v2 — one clock for any scene

Use a generic timing controller when several parts of a scene must share one exact schedule. It is format-neutral: the same controller can coordinate a physics simulation, geometry proof, chart, caption sequence, or ordinary shapes.

Think of it as four small pieces:

The phase declaration is the source of truth. The clock is only one visual view of that choreography.

Quick reference

Core pattern, after defining the referenced entities and simulation:

timing(clock, (1160,80), "intro=1 demo=6 result=2");
timerstyle(clock, "look=ring number=inside color=cyan");

timed(clock) {
  during("intro")  { show(title, 0.6); }
  during("demo")   { par { run(sim, 6); draw(sim.path, 6); } }
  during("result") { show(answer, 0.6); }
}

Use countdown when you only need an independent visual countdown. Use timing when named phases must govern other animation.

Compose inside phases

Each during block accepts the usual timeline language. In particular, use par for actions that must occupy the same phase together:

timing(clock, "setup=1 experiment=6 result=2");

timed(clock) {
  during("setup") { show(title, 0.6); }

  during("experiment") {
    par {
      run(pendulum, 6);
      draw(pendulum.path, 6);
      karaoke(caption, 0.35);
    }
  }

  during("result") {
    par {
      show(formula, 0.6);
      show(explanation, 0.6);
    }
    wait(1.4);
  }
}

Rules that prevent drift

• Give a generic controller a fresh id. Do not reuse an entity, quiz, simulation, or group id.
• Put constructors and style modifiers outside timed/during; put timeline actions such as show, draw, run, wait, par, and seq inside.
• A short phase block is padded automatically. A block that exceeds its phase is an error.
• A phase may have at most one during block. Combine related work inside it with par or seq.
• An omitted phase is valid and becomes a blank hold.
• Phase blocks may appear in any source order: they are placed at the absolute offsets declared by timing.
• timed(clock) already runs the clock. Do not also call run(clock) inside it.
• run(clock) is timer-only playback. run(clock, dur) is rejected because the phase declaration already owns the duration.

Choose the clock’s look

The clock uses native manic shapes, so it stays sharp at any output size and can be targeted like the rest of the scene. No SVG workflow is required.

The main controls are:

• number=inside|outside|none and direction=fill|drain
• size=small|medium|large|0.5..2.0 and thickness=0.4..3.0
• color, track, label, and font=mono|display
• finish=fade|hold|flash|pulse for the completion cue

Start with the default ring, then change the look only when it supports the scene’s meaning. For legibility, keep strong contrast between color and track, and avoid combining a busy clock with dense content in the same corner.

Advanced styling can target the stable tags clock.timer, clock.timer.track, clock.timer.progress, clock.timer.value, clock.timer.label, and clock.timer.effects (replace clock with the controller id).

Generic controller or Creator quiz?

The same visual clock system serves two different timing contracts:

• timing(fresh_id, "phase=seconds ...") creates a generic controller used by timed and during.
• timing(quiz_id, "calm ask=... think=... reveal=...") configures a Creator quiz and is played with run(quiz_id).

Do not wrap a quiz in timed; the quiz runner already owns its ask, options, think, reveal, hold, and stagger phases.

Common fixes

Complete non-quiz example using a pendulum, caption, formula, and segmented clock:

// Generic Timing v2 — one named clock coordinates a non-quiz physics scene.
// `timed` runs the visual timer and places every `during` block at the exact
// offset declared by `timing`; short blocks are padded, overruns are errors.
title("Generic Timing v2 — Pendulum");
canvas("16:9");
template("mono");
watermark(manicMark, (w*0.955-100, h*0.045+24), "Made With Manic");

text(head, (315, 72), "ONE CLOCK. EVERY BEAT.");
size(head, 30); bold(head); color(head, fg); hidden(head);
text(sub, (315, 112), "Generic Timing v2 — not a quiz");
size(sub, 18); color(sub, dim); hidden(sub);

pendulum(p, (640, 245), 1.5, 42, 140, 0.03);
untraced(p.path);

equation(law, (640, 602), `T\approx2\pi\sqrt{L/g}`, 54);
color(law, gold); hidden(law);
text(note, (640, 655), "The scene and clock share the same named phases.");
size(note, 21); color(note, dim); hidden(note);
text(done, (640, 680), "INTRO  →  EXPERIMENT  →  INSIGHT  →  OUTRO");
size(done, 18); color(done, cyan); hidden(done);

// A fresh id creates a format-neutral timing controller. Its phases total
// 10.4 seconds; no duplicate duration is passed to `timed` or `run`.
timing(showclock, (970, 86), "intro=1.2 experiment=6 insight=2 outro=1.2");
timerstyle(showclock,
           "look=segments number=outside direction=drain size=small thickness=1.15 color=cyan track=dim label=MASTER_CLOCK font=display finish=pulse");

timed(showclock) {
  during("intro") {
    par { show(head, 0.7); show(sub, 0.7); }
  }

  during("experiment") {
    par { run(p, 6); draw(p.path, 6); }
  }

  during("insight") {
    par { show(law, 0.6); show(note, 0.6); }
    pulse(p.bob, 0.7);
  }

  during("outro") {
    show(done, 0.6);
  }
}

Next: the palette, glow, and easings → Colour & style.

Voice — narrate your story

Add spoken narration to a Manic video with three ideas:

1. Pick a voice once — voice("…")
2. Speak full sentences — speak("…")
3. Keep short on-screen text separate — say(…)

You do not time the audio by hand. Each speak line lasts as long as it takes to say — motion on that beat waits with it.

Voice is optional. Skip it when the video should stay silent; use say alone for captions.

say vs speak

Rule of thumb: write the short caption with say, the full line with speak. They can run together on the same beat.

par {
  say(cap, "same grid → 3D");                          // what you read
  speak("Now lift the same grid into height.");        // what you hear
}

Or update a caption and speak in one call:

speak(cap, "Pull the camera back.");

How to add narration (step by step)

1. Put a caption box on the cast (optional but common)

text(cap, (cx, h*0.82), "");
size(cap, 28); color(cap, dim); wrap(cap, w*0.8);

2. Choose a voice once (near the top)

voice("cartesia");

You only need this if you use speak. One voice(...) per file is enough.

3. Narrate on the timeline

speak("Every world starts flat.");

Together:

title("A spoken beat");
canvas("16:9");
voice("cartesia");

text(cap, (cx, h*0.82), "");
size(cap, 28); color(cap, dim); wrap(cap, w*0.8);

par {
  say(cap, "cell by cell…");
  speak("Watch a map generate itself until the islands lock.");
}
wait(0.3);    // a short breath before the next idea

speak and voice always go together. Captions alone need only say — no voice line.

Choosing a speaker

voice takes up to four pieces:

voice(service, speaker?, pace?, language?)

Easy names (recommended)

voice("gtts");                         // simple built-in
voice("cartesia");                     // Skylar
voice("cartesia", "katie");
voice("cartesia", "jameson");
voice("elevenlabs");                   // Roger
voice("elevenlabs", "alice");
voice("elevenlabs", "jessica");

Your own speaker (provider voice id)

Paste the voice id from Cartesia or ElevenLabs when you have a favourite speaker that is not in the easy list:

// Cartesia — voice UUID from your Cartesia voice library
voice("cartesia", "a0e99841-438c-4a64-b679-ae501e7d6091");

// ElevenLabs — voice id from your ElevenLabs voice library
voice("elevenlabs", "21m00Tcm4TlvDq8ikWAM");

Easy names and raw ids both go in the same speaker slot.

Pace

voice("elevenlabs", "alice", "slow");     // normal | slow | fast
voice("cartesia", "katie", "fast");

Language

Defaults to English (en). Pass a language code when the narration is not English:

// language last (with pace)
voice("cartesia", "katie", "normal", "hi");
voice("elevenlabs", "alice", "normal", "es");

// or skip pace and put the language third
voice("cartesia", "katie", "hi");
voice("elevenlabs", "roger", "fr");

Common codes: en, hi, es, fr, de, pt, ja, zh, ko, it, ar, …

For the built-in gtts service, the second argument is the language:

voice("gtts", "en");
voice("gtts", "hi");

Narrate with motion (same beat)

Put caption, voice, and animation in one par so they land together:

par {
  say(cap, "fly the ridges");
  speak("Fly in low over the ridges.");
  orbit3(255, 15, 12, 3.8, smooth);
}

If the spoken line is longer than the motion, Manic holds the picture until the line finishes. A trailing wait(0.3) is only a pause between ideas — not a substitute for narration length.

Pacing — budget your Short by word count

You don’t set timings by hand, but you can predict how long a narrated video will run: a spoken line lasts about 2.5 words per second (≈150 words per minute — a natural narration pace).

So a Short that feels right on paper can quietly balloon: 150 words of narration is a full minute, even if the script looks short. If a video runs long, trim the words first — the motion follows the voice, not the other way round.

Preview pacing without an API key. Manic estimates each speak line’s length from its word count even when text-to-speech is offline or no key is set (the line is silent, but the timeline still reserves the time). That means --still <t> lands on the same beat it will at full voice — so you can check timing and framing before spending a single TTS call:

manic monty-hall.manic --still 15.6   # the frame the viewer sees at 15.6s

A few practicalities:

• Each line is clamped to 0.8s–30s — one very long speak won’t stall forever, but split big paragraphs into separate lines anyway; they read better.
• wait(...) adds on top of the spoken time. Since speak already paces the beat, keep waits small (wait(0.3)–wait(0.6)) — they’re breaths between ideas, not the pacing itself.
• Real TTS duration replaces the estimate when a voice key is present; it lands very close, so your --still preview stays accurate.
• Tip: to count your narration, add up the words inside every speak("…") and divide by 2.5 for a rough total in seconds.

Math in spoken lines

Write symbols as you would on screen; Manic reads them naturally:

speak("The slope is √(tan θ).");

Examples in the gallery

• Roberto Carlos’ Banana Kick — story VO + captions
• Your Map Is a 3D World — map → 3D with narration
• The Shortest Path — vector maze + A* with problem→solve narration (ElevenLabs)
• Made of Emoji — a vector spectacle with promo VO (ElevenLabs)
• The Monty Hall Problem — probability puzzle told in emoji, problem→solution→CTA narration (ElevenLabs)

Quick checklist

• One voice("…") near the top when you want narration
• Full sentences in speak("…")
• Short on-screen lines in say(cap, "…")
• Use par { … } when caption, voice, and motion should start together
• Budget length by word count (~2.5 words/sec) — ~75 words ≈ 30s
• Preview any beat with --still <t> (timing holds even with no TTS key)
• No voice? Omit voice / speak — say alone is fine

Templates — choose the whole visual system

A template controls the background, semantic palette, glow character and any page chrome for the entire movie. Choose it once near the top of the file:

canvas("9:16");
template("black");

black is the default. If a DSL file does not call template(...), it renders exactly as if template("black") had been written. Keeping the call explicit is useful in shared examples; omitting it is convenient for ordinary authoring.

Available templates

Useful aliases are monochrome, blackwhite, black-white, and bw for mono; blank and clean for plain; light and print for paper; and blue for blueprint.

black and plain are intentionally different. black is a truly black, chrome-free creator canvas; plain retains Manic’s original indigo-black neon surface.

Mono in practice

// Mono is the default; keep this line explicit when teaching or sharing.
title("Mono template");
canvas("16:9");
template("mono");

rect(card, (640, 360), 930, 430);
color(card, panel);

text(head, (640, 205), "ONE PALETTE · CLEAR HIERARCHY");
size(head, 42);
color(head, fg);
hidden(head);

circle(a, (410, 370), 58); color(a, cyan); hidden(a);
circle(b, (640, 370), 58); color(b, magenta); hidden(b);
circle(c, (870, 370), 58); color(c, lime); hidden(c);

text(al, (410, 470), "PRIMARY"); color(al, fg); hidden(al);
text(bl, (640, 470), "SECONDARY"); color(bl, dim); hidden(bl);
text(cl, (870, 470), "SUCCESS"); color(cl, lime); hidden(cl);

show(head, 0.4);
par {
  show(a, 0.5);
  show(b, 0.5);
  show(c, 0.5);
}
par {
  show(al, 0.35);
  show(bl, 0.35);
  show(cl, 0.35);
}
pulse(c);
wait(1);

Named colours remain meaningful under mono. fg, dim, panel, cyan, magenta, lime, gold, red, orange, blue, teal, violet, coral, indigo, and mint are mapped to deliberately different greys instead of collapsing to identical white. This preserves hierarchy and correct-answer contrast while keeping the export monochrome.

Use named colours for template-aware work:

color(answer, lime);       // success role; becomes a bright mono tone
color(note, dim);          // secondary role; remains visually quiet

hue(...) is intentionally an explicit colour choice and bypasses semantic palette remapping. Avoid it when the output must remain strictly black and white.

DSL selection versus export override

The DSL call travels with the scene. The command-line option is useful for a one-off alternate render:

manic scene.manic --still 4.0
manic scene.manic --record out --template paper

An explicit --template NAME export option overrides the DSL template for that run. This is a quick way to proof the same semantic scene on mono, paper and blueprint without editing the source.

Creator and Reel guidance

Start with black when colour is part of the explanation. It gives Creator stories a clean, cinema-dark canvas while preserving semantic accents:

canvas("9:16");
// template("black") is optional because black is the default.
creator(me, "@anish2good yt=zarigatongy x=@anish2good web=8gwifi.org/manic footer=social");
quiz(q, "Which statement is true?");

Choose mono for an intentionally black-and-white identity, shorts for a tinted studio surface, or paper for an exam-sheet or textbook treatment. Template choice does not change Creator layout, safe areas, timing, option labels or social-platform selection—it changes only their visual system.

Practical checks

• Review one reading frame and one reveal frame at phone size.
• On black, inspect dim lines and labels as well as bright accents.
• In mono, check luminance contrast rather than relying on colour names.
• Prefer one semantic accent role; do not make every object equally bright.
• Use plain when you specifically want the original indigo-neon surface.
• Use paper or blueprint to test whether a construction remains legible on a very different surface.

Next: Colour, glow and semantic roles →

Colour & style

The palette

manic uses a small set of semantic colour names. The default black template shows their full hues on an exact black canvas. Choose mono when the scene should communicate through black-and-white luminance instead. The semantic roles are:

Aliases: pink/accent → magenta · green → lime · yellow/amber → gold · purple → violet · turquoise → teal · salmon → coral · seafoam → mint · azure → blue · crimson → red · gray/grey → dim · white → fg · bg → void.

color(sun, cyan);
recolor(sun, magenta, 0.5);   // animate to a new palette colour

Any colour, by hue

For a computed colour — one per item in a loop — use hue, which takes an angle from 0 to 360:

hue(sun, 200);              // a fixed hue
for i in 0..24 {
  hue(p{i}, 360*i/24);      // a full rainbow around the loop
}

That’s how the rainbow-ring loop gets its colours.

Gradient paint — computed, not painted

For a colour that reads a quantity, use gradient. One word covers multi-stop ramps on fills and strokes; the mode (optional) picks the truth:

gradient(wave, blue, cyan, gold, 270);   // height of a plot
gradient(path, magenta, cyan);           // arc length along a stroke
gradient(well, panel, void, radial);     // centre → edge on a fill
gradient(p.path, blue, cyan, gold, "speed");      // true local speed (physics traj.)
gradient(swoop, dim, magenta, "curvature");       // how hard a path bends

Stops are palette names (≥2, evenly spaced) and stay template-aware. "speed" only works on pre-simulated physics trajectories; "curvature" works on any path. See the Modifiers table in Shapes, and the demos gradient, gradient-fastest-descent, and the shorts gradient-fastest-descent-shorts / gradient-pendulum-shorts.

Glow

Every entity has a neon glow (0 = crisp, higher = brighter halo):

glow(sun, 8);   // strong halo
glow(grid, 0);  // crisp, no halo — good for fine detail

Easings

The optional last argument of a motion verb is the easing — the shape of the motion over time:

move(p, (900, 400), 0.8, bounce);
move(p, (900, 400), 0.8, smooth);   // usually what you want

Canvas & size

canvas(...) sets the frame. Give it a preset or explicit pixels:

canvas("16:9");        // 1280x720  (also: 4:5, square, portrait/9:16, 4:3, 1080p, 4k)
canvas(1280, 720);     // explicit

portrait / 9:16 is 1080×1920 — pair it with the reel render preset for vertical / social clips.

Use --canvas portrait|4:5|square|16:9|WIDTHxHEIGHT to reframe one responsive source without changing its canvas(...) line. The override is applied before w, h, cx, cy, and build-time layout branches are evaluated.

Templates — the whole look

For the complete selection guide, CLI override rules, mono tips and a runnable black-and-white example, see Templates — choose the whole visual system.

template("...") sets the movie’s look in one call: the background, how the palette renders, the glow, and any page chrome. Put it near the top, after canvas(...).

canvas("16:9");
template("paper");     // a flat white exam-paper page

Omitting template(...) is exactly the same as selecting template("black"). Use mono deliberately for grayscale and plain for the original tinted neon surface.

The clever part is the palette remap: a template doesn’t just change the background, it re-maps every named palette colour to that template’s role. So on mono, cyan, magenta, lime, gold, red, orange, and blue become carefully separated greys; on paper, panel → light box, fg → dark ink, lime → forest green, and so on — which means your existing scene renders legibly on the new page without recolouring anything. That’s why template("paper") alone turns a pulley, a spring, or a linked list into a clean textbook figure (see Elevating a scene). paper/blueprint also drop the glow for crisp print output.

hue(...) and future explicit RGB colours are intentionally bespoke, so they pass through instead of being forced to greyscale. Use the named palette colours when a scene must remain strictly monochrome.

Next: loops, variables, and macros → The language layer.

The language layer

Everything so far has been static text. manic also has a small computation layer that runs before the animation — variables, arithmetic, loops, and macros. It lets one rule draw a hundred shapes.

These are resolved at build time. By the time the animation plays, they’ve expanded into plain calls — so they cost nothing at render.

Variables — let

let r = 120;
let gap = r * 2 + 40;
circle(a, (cx - gap, cy), r);
circle(b, (cx + gap, cy), r);

Arithmetic is what you’d expect: + - * / ^, parentheses, and functions like sin, cos, sqrt. Constants pi, tau, e are built in, as are the canvas vars w, h, cx, cy.

Put a * between names. A number can hug a name (2r, 3(x+1)), but two names glued together read as one word — write r*x, i*dx, pi*t, never rx / idx / pit. This is the most common slip in loops and formulas.

Loops — for

for i in 0..5 {
  dot(p{i}, (200 + i*180, cy), 8);   // p0 … p4
}

p{i} is id interpolation — {expr} glued to a name makes each entity unique. Use i in the body to compute positions, sizes, hues…

// one for-loop paints a full rainbow ring.
title("One loop");  canvas("16:9");
text(t, (cx, 90), "one loop, 24 dots, every hue");  color(t, cyan);  size(t, 28);  hidden(t);

let n = 24;
for i in 0..n {
  dot(p{i}, (cx + 300*cos(tau*i/n), cy + 300*sin(tau*i/n)), 14);
  hue(p{i}, 360*i/n);      // colour by angle -> a rainbow
  hidden(p{i});
}

show(t, 0.5);
stagger(0.05) { for i in 0..n { show(p{i}); } }
wait(1.4);

▶ See it play:

Conditionals — if

let n = 5;
if n > 3 {
  circle(big, (cx, cy), 120);
}

Macros — def

A def is a reusable rule. Its parameters are numbers; build ids inside with interpolation. It can even call itself (recursion) — that’s how the fractal tree in the gallery is one page of code:

def branch(k, x, y, ang, len, depth) {
  if depth > 0 && len > 2 {
    let x2 = x + len*cos(ang);
    let y2 = y - len*sin(ang);
    line(seg{k}, (x, y), (x2, y2));
    branch(2*k,     x2, y2, ang + 0.4, len*0.72, depth - 1);
    branch(2*k + 1, x2, y2, ang - 0.4, len*0.72, depth - 1);
  }
}
branch(1, cx, h - 40, 1.5708, 150, 12);

Curve L-systems — one rule, one path

For deterministic textbook curves, use lsystem instead of manually recursing into thousands of separate lines:

lsystem(carpet, (cx,cy), 620,
  "F+F+F+F",
  "F=FF+F+F+F+FF",
  "angle=90 heading=0 iterations=4");

gradient(carpet, cyan, magenta, gold);
stroke(carpet, 2);
untraced(carpet);
draw(carpet, 3, smooth);

The six arguments are:

1. id, centre, and fitted square size;
2. the starting string (axiom);
3. semicolon-separated rewrite rules such as "X=...;Y=...";
4. one short options string.

In the generated program, + turns left by angle, - turns right, | turns around, and every symbol listed by draw=F moves forward while drawing. heading sets the first direction, iterations controls detail, and padding keeps the result away from its fitted edge.

Use closed=true fill=true when the grammar describes a closed boundary; Manic triangulates it into one concave region. Keep fill=false for line curves. The constructor deliberately does not interpret branch brackets: use a recursive def or tree3 for branching plants. This separation keeps curve stories simple and makes invalid input easy to repair.

Practical tips

• Increase iterations one step at a time: rewrite systems grow exponentially.
• Keep the curve as one entity, then use ordinary draw, gradient, move, become, step, and camera verbs.
• For a lesson, show generations 0 → 1 → 2 before revealing the detailed curve.
• See lsystem-asymptote-curves.manic for four canonical grammars and creator-lsystem-fractal-curve.manic for a complete creator Short.

Repeated motifs — one design, many placements

Use repeat when the visual idea is “this motif forms a field,” not “write a loop that manually copies every part.”

polygon(tile, (cx-12,cy+10), (cx+12,cy+10), (cx,cy-14));
repeat(field, tile, "layout=hex rings=4 spacing=42 rotate=30 scale=0.8");
untraced(field);
draw(field, 2, smooth);

The motif can be one entity or a tag containing several entities. Choose:

• layout=hex rings=N spacing=S;
• layout=grid rows=R cols=C spacing=S (or separate gapx / gapy);
• layout=radial count=N radius=R face=same|out.

rotate turns the arrangement and scale sizes each instance. Every output is tagged with the destination id; stable instances are {id}.i0, {id}.i1, … The output of one repeat can itself be the motif of another, which is how nested textbook tilings stay short. Use normal color, gradient, mask, untraced, draw, and stagger afterward.

See asymptote-tiling-reference.manic for hex/grid/radial/nested coverage and creator-one-tile-pattern-story.manic for the creator treatment.

Reductions

Fold a range into one number with sum, prod, min, max:

let n = 6;
let total = sum(i in 1..n : i);   // 1 + 2 + … + (n-1)

That’s the whole language. The rest is kits — bundles of higher-level figures → Kits.

Manic API reference

This page is generated from manic-lang’s builtin catalog, the same source used by parsing, editor highlighting, autocomplete, and engine/catalog regression tests. It currently lists 393 builtins across 16 kits.

Run python3 scripts/gen-api.py after changing the catalog. Run python3 scripts/gen-api.py --check to verify that this committed page is current.

Reading a signature

• new id is the name created by a constructor.
• id or tag targets an existing entity, generated part, or group.
• Parameters inside brackets are optional.
• … means the builtin is catalogued, but its detailed parameter metadata still lives in the linked topic guide or LANGUAGE.md.
• This is the exhaustive name index; the topic chapters remain the best place to learn composition, constraints, and examples.

Standard shapes, styling, and motion

Generative

Process

Charts

Math

Systems

Geometry

Algorithms and data structures

Grid

3D

Brand

Stats

Physics

Machine learning

Optics

Creator

Fixed language vocabularies

Colours

fg, void, black, ink, cyan, magenta, lime, gold, red, orange, blue, teal, violet, coral, indigo, mint, dim, panel, rainbow

Easings

linear, smooth, inout, in, out, overshoot, back, bounce, elastic, spring

Named plot functions

sin, cos, tan, asin, arcsin, acos, arccos, atan, arctan, parabola, sq, square, cubic, cube, line, id, identity, abs, exp, sqrt, log, ln, recip, inv, gauss, bell, sinc, sigmoid, logistic, relu, step, heaviside

Canvas presets

16:9, 1080p, 4k, square, portrait, 4:5, 4:3, widescreen, landscape, 720p, fullhd, hd, 2160p, 1:1, 9:16, vertical, story, reel, feed

Templates and aliases

black, mono, plain, terminal, paper, blueprint, shorts, monochrome, blackwhite, black-white, bw, blank, clean, neon, shell, print, light, blue, short, punch

Language keywords

let, for, if, else, def, in, sum, prod, min, max

Reserved variables

w, h, cx, cy, pi, e, tau, inf, infinity

Systems routing and ports

Routing: orthogonal

Ports: auto, left, right, top, bottom

Speech services and curated Cartesia voices

Services: gtts, google, cartesia, elevenlabs, 11labs

Cartesia voices: katie, skylar, jameson, gemma, archie

Machine learning — models made visible

Manic ML begins with a simple promise: the learner should see the values the model actually computed, one meaningful flow at a time. A dense network is not useful merely because every node and edge is present. The current layer should be legible; the surrounding architecture should provide context without becoming a mesh of noise.

ML1 covers deterministic feed-forward networks and activation functions. ML2 adds supervised loss, exact reverse-mode gradients, and explicit parameter updates on the same persistent figure. ML3 adds tensors, convolution, pooling, and a shared operator scan. ML4 adds one exact, focused self-attention head and a deterministic top-k output view. ML5 makes the earlier text-to-model-input journey visible through honest token boundaries, embeddings, and position. ML6 carries those vectors through a complete multi-head transformer block. ML7 keeps the final language-model projection separate, then makes temperature and next-token sampling visible without pretending to run a pretrained model.

The visual language is still ordinary Manic

The ML nouns compute the diagram. Core Manic supplies the cinematography. The shipped examples use a small visual grammar consistently:

• cyan carries input or data;
• lime carries positive or retained signal;
• magenta carries negative contribution or reverse gradient;
• gold marks the active operation, residual result, or selected prediction;
• dim structure preserves context without letting every edge compete.

Attention outputs and Transformer stages contain real vector summaries or signed mini bars, so a labelled box is never the only explanation. forward leaves a quiet contribution-weighted trace, backward uses external gradient badges, and encode flows through the main path plus both residual bypasses. These are defaults of the kit; creators do not need to animate internal tags by hand.

Camera motion is optional. When it helps, keep it small, focus one calculation, and return to the complete result:

step("compute") {
  par {
    forward(net, "0.15 0.92 0.38", 4.2, smooth);
    seq {
      par { cam((w*0.24,h*0.47),0.55,smooth); zoom(1.06,0.55,smooth); }
      wait(0.55);
      cam((cx,h*0.47),0.8,smooth);
      wait(0.55);
      cam((w*0.76,h*0.47),0.8,smooth);
      par { cam((cx,cy),0.55,smooth); zoom(1,0.55,smooth); }
    }
  }
}

Avoid decorative particles around a network. Use a bounded packet or flow only when it represents a token, activation, attention contribution, gradient, or sampled choice. The settled frame must remain understandable with motion paused and with the default black template.

Start with the story you need

You do not need to learn the whole ML kit. Choose one row, create the named object, and use normal Manic step, show, say, and pulse calls around it.

The smallest useful pattern is:

activation(view, (cx,cy), relu, 510, 260);
untraced(view.axes);
untraced(view.curve);

step("meet-the-rule") {
  draw(view.axes, 0.7);
  draw(view.curve, 1.2);
}

ML words compute or construct the truthful figure. Core Manic remains the story language. This division keeps a tensor-only or activation-only lesson small instead of forcing every creator into a complete neural network.

The complete ML1–ML7 vocabulary

backward is intentionally not standalone: it requires a forward prediction and loss. scan similarly requires a convolve or pool result. Errors name the missing prerequisite instead of drawing a plausible but false animation.

Learn tensors without a network

Use a 1×1 grid for one displayed scalar, one row for a vector, rows for a matrix, and | to stack channels. The accompanying title can name the familiar rank while the same tensor noun supplies stable cells and values:

tensor(scalar, (180,360), "7");
tensor(vector, (460,360), "7 2 -1 4");
tensor(matrix, (760,360), "7 2 -1; 4 0 3; 1 5 6");
tensor(volume, (1060,360),
  "7 2 -1; 4 0 3; 1 5 6 | 2 4 8; 1 3 9; 0 5 6");

Every part is selectable: volume.channel0, volume.row1, volume.col2, volume.cells, volume.values, or one cell such as volume.c1.r0c2.

Explain one activation without a network

activation(view, (cx,cy), relu, 620, 320);

Standalone plots support linear, relu, sigmoid, and tanh. Use view.axes, view.curve, and the ordinary line, point, equation, draw, and pulse tools to test inputs or explain a region. softmax belongs inside a network because it transforms a complete vector rather than one scalar.

A complete forward pass

network(net, (cx, cy), "3 6 4 3", "relu tanh softmax", 820, 350, 21);
forward(net, "0.15 0.92 0.38", 4.2, smooth);

The two quoted lists serve different purposes:

• "3 6 4 3" defines input, hidden, hidden, and output layer sizes.
• "relu tanh softmax" defines what happens after each of the three affine transitions.
• 21 is the deterministic seed. The same file produces the same weights, activations, prediction, and frames every time.
• The input supplied to forward must contain exactly three finite values.

Manic uses Xavier-uniform weights for the seeded educational model. It computes each affine layer, applies the named activation, and uses a numerically stable softmax. The output bars and percentages are derived from that result.

One complete learning step

forward(net, "0.15 0.92 0.38", 3.2, smooth);
loss(net, "1 0 0", crossentropy, 1.5, smooth);
backward(net, 3.2, smooth);
checkpoint(beforeUpdate, net);
update(net, 0.18, 2.3, smooth);

These four beats deliberately remain visible:

1. forward stores the real activations for the authored input.
2. loss compares the output with the target. crossentropy requires a softmax output and a non-negative target distribution that sums to one. mse supports other output activations and arbitrary finite targets.
3. backward calculates exact reverse-mode gradients for every visible and hidden parameter. The pulse travels output → input along the existing edges.
4. update applies parameter -= learning_rate * gradient, recomputes the same input, and replaces the output bars and loss with their new computed values.

The optional loss kind defaults to cross-entropy for a softmax output and MSE otherwise. The default learning rate is 0.15. A learning rate is not a visual speed: changing it changes the mathematics, and a large value can truthfully increase the loss.

Undo one authored update exactly

Place a checkpoint after the prediction has been compared with its target and before the parameter update. It takes no timeline time:

backward(net, 3.2, smooth);
checkpoint(beforeUpdate, net);
update(net, 0.18, 2.3, smooth);
restore(net, beforeUpdate, 2.3, smooth);

checkpoint saves every weight and bias plus the current layer values, prediction, target, and loss. restore reverses the visible flow and returns all of them to that exact saved state. It also clears active gradients; call backward again before attempting another update.

This is precise checkpoint rollback. It is useful for explaining what one gradient step changed, comparing before and after, or showing an undo action. It is not general machine unlearning: restoring a saved state does not prove that a data point’s influence was removed from an otherwise trained model.

From pixels to feature maps

Rows use ;, values use spaces or commas, and channels use | inside one quoted grid. This keeps small textbook tensors readable:

tensor(image, (250, 340), "0 0 1; 0 1 1; 0 0 1", 44, cyan);
kernel(edge, (540, 340), "-1 0 1; -2 0 2; -1 0 1", 44, magenta);

convolve(feature, image, edge, (820, 340), 1, 1, 0, relu, 44);
scan(feature, 4.0, smooth);

pool(compact, feature, (1080, 340), max, 2, 2, 0, 44);
scan(compact, 2.8, smooth);

convolve computes one output feature map. Its optional values are stride, zero padding, bias, cellwise activation, and cell size. A multi-channel input uses one kernel grid per input channel and sums every channel into each output cell:

tensor(rgb, (300, 340), "1 2; 3 4 | 10 20; 30 40 | 2 0; 1 3");
kernel(k, (600, 340), "1 | 0.5 | -1");
convolve(feature, rgb, k, (900, 340));

For multiple feature detectors, author multiple kernels and outputs. That keeps each receptive field explainable instead of hiding a filter bank behind one visually dense call.

pool supports max and average, operating independently on each channel. The default window is 2 and the default stride equals the window. Padding does not fabricate candidate values: padded positions are excluded. Max-pool ties select the first valid cell in row-major order, which makes selection stable across renders and direct seeking.

One scanner for convolution and pooling

scan(output, duration, easing) coordinates four identities that should never drift apart:

• the receptive-field frame on the source;
• the kernel/operator focus;
• the truthful arithmetic summary;
• the destination frame and exact revealed value.

When a pooled tensor consumes a convolution result, starting the pooling scan automatically quiets the completed convolution arithmetic strip. The figures remain in place, so the learner sees continuity without two competing status lines. Use normal step, caption, show, and pulse calls for the narrative; let scan own the synchronized numerical choreography.

Show how words gain position

Start with the sentence, choose honest boundaries, then turn those identities into vectors:

tokenize(words, (cx, 150), "the cat chased the cat", word, w*0.70);
embedding(context, words, (cx, 470), "seeded 6 37", sinusoidal,
  w*0.90, h*0.46);

The optional token mode is:

• word — Unicode letters/numbers form words; punctuation stays separate;
• character — each character is a token and whitespace remains visible;
• authored — | marks every exact boundary for a hand-authored subword explanation.

Authored boundaries are not called BPE because Manic has not applied a merge table. embedding accepts either one explicit numeric row per token (rows separated with ;) or "seeded DIM [SEED]". Seeded values are reproducible educational lookup vectors, not pretrained weights. Repeated copies of the same token reuse the same base vector; adding exact sinusoidal position makes their final model inputs different. Use none instead of sinusoidal when the lesson should stop at the lookup table.

Reveal context.vectors, then context.positions, then context.combined. For comparison, pulse stable rows such as context.row1; use .dimN to focus one feature across the table. Manic caps the story at 12 tokens and eight dimensions so the values remain teachable on a phone.

Explain one transformer attention head

Give attention a short token list and one embedding row per token. Then focus one token with its 1-based position:

attention(head, (cx, 360),
  "Art | ificial | intelligence | transforms | business",
  "1 0.2 -0.4 0.7; 0.8 0.1 -0.3 0.6; -0.2 1 0.5 0.3; 0.1 0.6 0.9 -0.2; 0.7 -0.1 0.4 1",
  980, 420, 23);

attend(head, 3, 5.2, smooth);

This computes one seeded Q/K/V projection, the scaled score matrix QK^T / sqrt(d), a stable row-wise softmax, and each exact weighted value mix. attend(head, 3, ...) highlights the query for intelligence; it does not rebuild or replace the surrounding tokens.

Add a small output ranking only when the story needs it:

topk(next, head, 3, (1540, 400),
  "business | work | world | industry | future | people",
  4, 420, 260, 29);

topk adds the selected embedding to its attention output, applies a seeded educational output projection, and shows probabilities from the full softmax. Those percentages are mathematically exact for the authored figure, but they are not predictions from a pretrained language model. Keep the candidate list small enough to read; the visual shows at most eight selected results.

Walk through a complete transformer block

Pass the ML5 embedding directly into transformer; do not copy its rows:

transformer(block, context, (cx, 500),
  "heads=2 mask=causal mlp=12 activation=gelu norm=pre dropout=0 mode=inference seed=41",
  w*0.92, h*0.62);
encode(block, 6.2, smooth);

The one configuration sentence controls the choices that change the actual calculation:

• heads=1..4; d_model must divide exactly across them;
• mask=none|causal; causal future cells receive zero probability;
• mlp=WIDTH up to 32 and activation=gelu|relu|silu|tanh;
• norm=pre|post, which changes where both layer normalizations happen;
• dropout=0..less-than-1, mode=inference|training, and a reproducible seed.

Each head computes scaled Q/K scores, applies its mask, normalizes with stable softmax, and mixes V. Manic concatenates the heads, applies the output projection, follows the first residual/norm stage, expands and contracts the MLP, then follows the second residual/norm stage. Training dropout is a real seeded boolean mask with inverted scaling; inference disables it completely. encode reveals this existing computation and remains safe under direct seek.

Turn a hidden state into one next token

The transformer’s MLP produces another hidden representation. It does not directly produce vocabulary probabilities. logits makes the separate language-model head explicit:

logits(next, block, 5, (cx, 520),
  "reason | predict | learn | adapt | explain | .",
  0.8, 760, 440, 73);
sample(next, "top-p 0.90 seed=17", 3.8, smooth);

The third argument is a 1-based transformer token. Candidate labels are |-separated and intentionally authored; Manic supports 2–12 in one readable view. The optional temperature defaults to 1, followed by width, height, and projection seed.

logits computes W_lm h + b from that final hidden row. It then divides every logit by the positive temperature and applies one numerically stable softmax to the complete candidate list. Reuse the same projection seed for a fair temperature comparison: logits remain identical while every probability is recomputed. Lower temperature sharpens the distribution; higher temperature spreads it.

sample keeps four common choices behind one word:

An excluded candidate has exact probability zero and cannot be sampled. The same seed and same distribution choose the same result. All displayed values come from the deterministic educational projection declared in the scene; they are not predictions from a pretrained language model.

Introduce an activation first

activation(reluView, (cx, cy), relu, 510, 260);
untraced(reluView.axes);
untraced(reluView.curve);

par {
  draw(reluView.axes, 0.7);
  draw(reluView.curve, 1.2);
}

activation supports linear, relu, sigmoid, and tanh. A standalone softmax curve would be misleading because softmax depends on all entries in a vector; show it as the output activation of a network instead.

Design details that make the result readable

• Inactive edges remain quiet. During forward, contribution magnitude drives emphasis and one pulse travels in the direction of computation.
• Weight sign and magnitude affect edge styling, but labels, brightness, and width keep the structure understandable under the monochrome template.
• Large numerical layers show their first and last units around an ellipsis. Computation still uses every unit; only the drawing uses level of detail.
• Input, hidden, and output nodes retain stable ids throughout the story. Manic updates values instead of clearing and rebuilding the network.
• Output bars grow from zero to the computed value. A softmax output is labelled as a percentage and the status strip names the selected class.
• loss places the target beside each output without replacing the prediction. Error magnitude focuses attention on the outputs that disagree.
• backward temporarily recolours connections by gradient sign and weights their emphasis by gradient magnitude. The settled network remains the same object, ready for the update.
• update shows the gradient direction first, then restores edge styling from the new weights and recomputes every node. Its final status preserves the old and new loss so the claimed learning outcome is inspectable.
• restore sends one readable reverse pulse through the same graph, settles edge styling from the saved weights, and restores the saved output bars and loss without rebuilding the network.

Compose it like any other Manic scene

Every part is an ordinary entity carrying useful tags:

That means normal verbs still apply:

hidden(net);

step("meet-the-model") {
  show(net, 0.6);
}

step("compute") {
  forward(net, "0.15 0.92 0.38", 4.2, smooth);
}

step("decision") {
  pulse(net.output, 0.7);
}

Use named steps for question, intuition, computation, and takeaway. Let forward own the dense numerical choreography; use captions and equations to explain why the active operation matters.

For a learning story, keep the causal order clear:

step("predict") { forward(net, "0.15 0.92 0.38", 3.2); }
step("compare") { loss(net, "1 0 0", crossentropy, 1.5); }
step("credit")  { backward(net, 3.2); }
checkpoint(beforeUpdate, net);
step("learn")   { update(net, 0.18, 2.3); }
step("unlearn") { restore(net, beforeUpdate, 2.3); }

Calling forward with a new input starts a fresh learning beat and clears the old target/gradient state. After update, another backward may compute fresh gradients for the updated parameters and the same retained target. Every update still requires a preceding backward; there is no invisible optimizer loop. Name a restore step “rollback” or explain its exact boundary if you use the playful label “unlearn”.

Current boundary

The ML kit is intentionally for small educational models. It does not load arbitrary PyTorch or TensorFlow programs, run hidden training loops, expose an optimizer catalogue, train large models, or require a GPU. Explicit authored weights, automatic filter banks, convolutional back-propagation, stacks of multiple transformer blocks, model imports, and packaged pretrained tokenizers remain planned work. ML4 deliberately computes one educational attention head, not a hidden pretrained language model. ML5 offers deterministic word/character splitting and exact authored boundaries; it does not claim a heuristic is BPE. Token sequences accept at most 12 tokens and eight embedding values each. Attention accepts 2–8 tokens with at most eight embedding values each; its candidate vocabulary is capped at 16. ML6 accepts 1–4 heads, requires exact division of the model dimension, caps the MLP at 32 values, and computes one educational block rather than an imported language model. ML7 accepts 2–12 authored candidates and a positive finite temperature; its LM projection and sampling seed are educational and explicit. Tensor axes are capped at 16 cells and a tensor at 2,048 values so unreadable stories fail early instead of silently becoming visual noise.

Review the shipped stories

The foundation story proves that tensor plus ordinary Manic is enough to explain rank and dimensional growth:

// manic-ml-scalar-to-tensor.manic — ML foundation story
// One value gains an axis, then rows, then stacked channels. The ML-specific
// surface is only tensor(...); ordinary Manic verbs own the explanation.

title("Manic ML — From Scalar to Tensor");
canvas("16:9");
template("mono");

creator(me, "@anish2good name=Manic_ML tagline=Models_made_visible yt=zarigatongy x=@anish2good web=8gwifi.org/manic accent=cyan secondary=magenta footer=compact cta=Build_the_dimensions safe=clean");
socials(me);

let u = (w+h-abs(w-h))/1440;
let cell = 38*u;

if h > 1.45*w {
  watermark(manicMark, (w*0.15, h*0.06), "Made With Manic");
  text(kicker, (cx, h*0.065), "MANIC ML · DATA FOUNDATIONS");
  text(headline, (cx, h*0.105), "One value gains dimensions");
  text(caption, (cx, h*0.84), "Begin with one measured value.");

  tensor(scalar, (cx, h*0.20), "7", cell, gold);
  tensor(vector, (cx, h*0.35), "7 2 -1 4", cell, cyan);
  tensor(matrix, (cx, h*0.53), "7 2 -1; 4 0 3; 1 5 6", cell, magenta);
  tensor(volume, (cx, h*0.72), "7 2 -1; 4 0 3; 1 5 6 | 2 4 8; 1 3 9; 0 5 6", cell, lime);

  text(scalarTitle, (cx, h*0.155), "SCALAR · RANK 0");
  text(vectorTitle, (cx, h*0.295), "VECTOR · RANK 1");
  text(matrixTitle, (cx, h*0.445), "MATRIX · RANK 2");
  text(volumeTitle, (cx, h*0.625), "TENSOR · RANK 3");

  arrow(grow1, (cx, h*0.245), (cx, h*0.285));
  arrow(grow2, (cx, h*0.395), (cx, h*0.435));
  arrow(grow3, (cx, h*0.585), (cx, h*0.615));
}
else if w > 1.25*h {
  watermark(manicMark, (w*0.17, h*0.09), "Made With Manic");
  text(kicker, (cx, h*0.075), "MANIC ML · DATA FOUNDATIONS");
  text(headline, (cx, h*0.14), "One value gains dimensions");
  text(caption, (cx, h*0.82), "Begin with one measured value.");

  tensor(scalar, (w*0.11, h*0.46), "7", cell, gold);
  tensor(vector, (w*0.34, h*0.46), "7 2 -1 4", cell, cyan);
  tensor(matrix, (w*0.61, h*0.46), "7 2 -1; 4 0 3; 1 5 6", cell, magenta);
  tensor(volume, (w*0.86, h*0.46), "7 2 -1; 4 0 3; 1 5 6 | 2 4 8; 1 3 9; 0 5 6", cell, lime);

  text(scalarTitle, (w*0.11, h*0.34), "SCALAR · RANK 0");
  text(vectorTitle, (w*0.34, h*0.34), "VECTOR · RANK 1");
  text(matrixTitle, (w*0.61, h*0.34), "MATRIX · RANK 2");
  text(volumeTitle, (w*0.86, h*0.34), "TENSOR · RANK 3");

  arrow(grow1, (w*0.17, h*0.46), (w*0.23, h*0.46));
  arrow(grow2, (w*0.44, h*0.46), (w*0.51, h*0.46));
  arrow(grow3, (w*0.70, h*0.46), (w*0.76, h*0.46));
}
else {
  watermark(manicMark, (w*0.18, h*0.08), "Made With Manic");
  text(kicker, (cx, h*0.06), "MANIC ML · DATA FOUNDATIONS");
  text(headline, (cx, h*0.17), "One value gains dimensions");
  text(caption, (cx, h*0.84), "Begin with one measured value.");

  tensor(scalar, (w*0.24, h*0.34), "7", cell, gold);
  tensor(vector, (w*0.73, h*0.34), "7 2 -1 4", cell, cyan);
  tensor(matrix, (w*0.24, h*0.65), "7 2 -1; 4 0 3; 1 5 6", cell, magenta);
  tensor(volume, (w*0.73, h*0.65), "7 2 -1; 4 0 3; 1 5 6 | 2 4 8; 1 3 9; 0 5 6", cell, lime);

  text(scalarTitle, (w*0.24, h*0.235), "SCALAR · RANK 0");
  text(vectorTitle, (w*0.73, h*0.235), "VECTOR · RANK 1");
  text(matrixTitle, (w*0.24, h*0.505), "MATRIX · RANK 2");
  text(volumeTitle, (w*0.73, h*0.505), "TENSOR · RANK 3");

  arrow(grow1, (w*0.34, h*0.34), (w*0.50, h*0.34));
  arrow(grow2, (w*0.73, h*0.40), (w*0.36, h*0.56));
  arrow(grow3, (w*0.35, h*0.65), (w*0.50, h*0.65));
}

size(kicker, 19*u); color(kicker, dim); bold(kicker); hidden(kicker);
size(headline, 34*u); bold(headline); wrap(headline, w*0.82); hidden(headline);
size(caption, 21*u); color(caption, dim); wrap(caption, w*0.78); hidden(caption);

size(scalarTitle, 17*u); bold(scalarTitle); color(scalarTitle, dim); hidden(scalarTitle);
size(vectorTitle, 17*u); bold(vectorTitle); color(vectorTitle, dim); hidden(vectorTitle);
size(matrixTitle, 17*u); bold(matrixTitle); color(matrixTitle, dim); hidden(matrixTitle);
size(volumeTitle, 17*u); bold(volumeTitle); color(volumeTitle, dim); hidden(volumeTitle);

color(grow1, dim); stroke(grow1, 2.5*u); hidden(grow1);
color(grow2, dim); stroke(grow2, 2.5*u); hidden(grow2);
color(grow3, dim); stroke(grow3, 2.5*u); hidden(grow3);

hidden(scalar.cells); hidden(scalar.values); hidden(scalar.labels);
hidden(vector.cells); hidden(vector.values); hidden(vector.labels);
hidden(matrix.cells); hidden(matrix.values); hidden(matrix.labels);
hidden(volume.cells); hidden(volume.values); hidden(volume.labels);

step("scalar") {
  show(kicker, 0.35);
  show(headline, 0.45);
  show(caption, 0.40);
  show(scalarTitle, 0.30);
  par {
    show(scalar.cells, 0.55);
    show(scalar.values, 0.55);
  }
}
wait(0.55);

step("vector") {
  par {
    show(grow1, 0.35);
    show(vectorTitle, 0.30);
    show(vector.cells, 0.60);
    show(vector.values, 0.60);
    say(caption, "Repeat the value along one ordered axis: position now matters.", 0.40);
  }
}
wait(0.60);

step("matrix") {
  par {
    show(grow2, 0.35);
    show(matrixTitle, 0.30);
    show(matrix.cells, 0.65);
    show(matrix.values, 0.65);
    say(caption, "Add rows to the columns: one axis becomes a two-dimensional matrix.", 0.40);
  }
}
wait(0.65);

step("tensor") {
  par {
    show(grow3, 0.35);
    show(volumeTitle, 0.30);
    show(volume.cells, 0.70);
    show(volume.values, 0.70);
    say(caption, "Stack matrices as channels: the same values now carry depth and context.", 0.40);
  }
}
wait(0.75);

step("one-family") {
  pulse(volume.channel1, 0.75);
  say(caption, "Scalar, vector, and matrix are all tensors—distinguished by their axes.", 0.45);
}
wait(1.50);

The activation story uses one real ReLU plot and core Manic probes to explain negative and positive inputs:

// manic-ml-activation-focus.manic — one ML noun, one complete lesson
// `activation` supplies the truthful ReLU curve. Core Manic supplies the
// question, equation, input probes, local emphasis, timing, and takeaway.

title("Manic ML — Why ReLU Changes a Neuron");
canvas("16:9");
template("mono");

creator(me, "@anish2good name=Manic_ML tagline=Models_made_visible yt=zarigatongy x=@anish2good web=8gwifi.org/manic accent=cyan secondary=magenta footer=compact cta=See_the_rule safe=clean");
socials(me);

let u = (w+h-abs(w-h))/1440;

if h > 1.45*w {
  watermark(manicMark, (w*0.15, h*0.06), "Made With Manic");
  text(kicker, (cx, h*0.065), "MANIC ML · ACTIVATION");
  text(headline, (cx, h*0.11), "Why does a neuron need ReLU?");
  text(caption, (cx, h*0.79), "A neuron first receives an unrestricted number.");
  equation(rule, (cx, h*0.60), `\operatorname{ReLU}(x)=\max(0,x)`, 35*u);

  activation(reluView, (cx, h*0.38), relu, w*0.74, h*0.22);
  line(negativePath, (w*0.13, h*0.466), (cx, h*0.466));
  line(positivePath, (cx, h*0.466), (w*0.87, h*0.27));
  line(positiveGuide, (w*0.685, h*0.466), (w*0.685, h*0.368));
  circle(negativeProbe, (w*0.315, h*0.466), 8*u);
  circle(positiveProbe, (w*0.685, h*0.368), 8*u);
  text(negativeNote, (w*0.27, h*0.525), "x = −2  →  0");
  text(positiveNote, (w*0.73, h*0.525), "x = 2  →  2");
}
else if w > 1.25*h {
  watermark(manicMark, (w*0.17, h*0.09), "Made With Manic");
  text(kicker, (cx, h*0.075), "MANIC ML · ACTIVATION");
  text(headline, (cx, h*0.14), "Why does a neuron need ReLU?");
  text(caption, (cx, h*0.82), "A neuron first receives an unrestricted number.");
  equation(rule, (w*0.79, h*0.36), `\operatorname{ReLU}(x)=\max(0,x)`, 34*u);

  activation(reluView, (w*0.38, h*0.49), relu, w*0.52, h*0.48);
  line(negativePath, (w*0.12, h*0.677), (w*0.38, h*0.677));
  line(positivePath, (w*0.38, h*0.677), (w*0.64, h*0.25));
  line(positiveGuide, (w*0.51, h*0.677), (w*0.51, h*0.463));
  circle(negativeProbe, (w*0.25, h*0.677), 8*u);
  circle(positiveProbe, (w*0.51, h*0.463), 8*u);
  text(negativeNote, (w*0.79, h*0.50), "x = −2  →  0");
  text(positiveNote, (w*0.79, h*0.59), "x = 2  →  2");
}
else {
  watermark(manicMark, (w*0.18, h*0.08), "Made With Manic");
  text(kicker, (cx, h*0.06), "MANIC ML · ACTIVATION");
  text(headline, (cx, h*0.145), "Why does a neuron need ReLU?");
  text(caption, (cx, h*0.82), "A neuron first receives an unrestricted number.");
  equation(rule, (cx, h*0.67), `\operatorname{ReLU}(x)=\max(0,x)`, 34*u);

  activation(reluView, (cx, h*0.40), relu, w*0.72, h*0.28);
  line(negativePath, (w*0.14, h*0.509), (cx, h*0.509));
  line(positivePath, (cx, h*0.509), (w*0.86, h*0.26));
  line(positiveGuide, (w*0.68, h*0.509), (w*0.68, h*0.384));
  circle(negativeProbe, (w*0.32, h*0.509), 8*u);
  circle(positiveProbe, (w*0.68, h*0.384), 8*u);
  text(negativeNote, (w*0.27, h*0.58), "x = −2  →  0");
  text(positiveNote, (w*0.73, h*0.58), "x = 2  →  2");
}

size(kicker, 19*u); color(kicker, dim); bold(kicker); hidden(kicker);
size(headline, 34*u); bold(headline); wrap(headline, w*0.82); hidden(headline);
size(caption, 21*u); color(caption, dim); wrap(caption, w*0.78); hidden(caption);
hidden(rule);

color(negativePath, magenta); stroke(negativePath, 5*u); glow(negativePath, 0.35); untraced(negativePath);
color(positivePath, cyan); stroke(positivePath, 5*u); glow(positivePath, 0.35); untraced(positivePath);
color(positiveGuide, dim); stroke(positiveGuide, 2*u); dashed(positiveGuide, 9*u, 7*u); untraced(positiveGuide);

color(negativeProbe, magenta); filled(negativeProbe); glow(negativeProbe, 0.55); hidden(negativeProbe);
color(positiveProbe, cyan); filled(positiveProbe); glow(positiveProbe, 0.55); hidden(positiveProbe);
size(negativeNote, 18*u); color(negativeNote, magenta); bold(negativeNote); hidden(negativeNote);
size(positiveNote, 18*u); color(positiveNote, cyan); bold(positiveNote); hidden(positiveNote);

untraced(reluView.axes);
untraced(reluView.curve);
hidden(reluView.label);

step("question") {
  show(kicker, 0.35);
  show(headline, 0.45);
  show(caption, 0.40);
  draw(reluView.axes, 0.75);
}
wait(0.55);

step("rule") {
  show(rule, 0.55);
  say(caption, "ReLU makes one transparent promise: return the larger of zero and x.", 0.40);
}
wait(0.55);

step("negative-input") {
  par {
    draw(negativePath, 0.75);
    show(negativeProbe, 0.35);
    show(negativeNote, 0.35);
    say(caption, "Negative input is muted at zero; it cannot send negative evidence onward.", 0.40);
  }
}
wait(0.65);

step("positive-input") {
  par {
    draw(positivePath, 0.85);
    draw(positiveGuide, 0.55);
    show(positiveProbe, 0.35);
    show(positiveNote, 0.35);
    say(caption, "Positive input passes through unchanged, preserving its strength.", 0.40);
  }
}
wait(0.70);

step("activation") {
  par {
    draw(reluView.curve, 1.10);
    show(reluView.label, 0.35);
    say(caption, "That small bend gives a network a nonlinear decision boundary.", 0.40);
    par { cam((cx, h*0.47), 0.70, smooth); zoom(1.10, 0.70, smooth); }
  }
}
wait(0.75);

step("takeaway") {
  par {
    pulse(reluView.curve, 0.75);
    say(caption, "ReLU does not invent a signal: it gates what the neuron already computed.", 0.45);
    par { cam((cx, cy), 0.70, smooth); zoom(1.0, 0.70, smooth); }
  }
}
wait(1.50);

The gallery example combines activation, network, forward computation, named story stages, Creator branding, and a professional restrained layout:

// manic-ml-forward-pass.manic — ML1 creator proof
// A real deterministic network computes one prediction. The story keeps the
// model persistent and reveals only the active computation instead of flashing
// every connection at once.

title("Manic ML — A Forward Pass You Can Follow");
canvas("16:9");
template("mono");

creator(me, "@anish2good name=Manic_ML tagline=Models_made_visible yt=zarigatongy x=@anish2good web=8gwifi.org/manic accent=cyan secondary=magenta footer=compact cta=See_the_computation safe=clean");
socials(me);

let u = (w+h-abs(w-h))/1440;

// One story reflows to portrait, feed, square, and landscape. The portrait
// network narrows to reserve a clean probability lane at the right.
if h > 1.45*w {
  watermark(manicMark, (w*0.18, h*0.075), "Made With Manic");
  text(kicker, (cx, h*0.08), "MANIC ML · FORWARD PASS");
  text(headline, (cx, h*0.13), "How does a network choose?");
  text(caption, (cx, h*0.72), "First, a neuron keeps positive evidence and removes negative evidence.");
  activation(reluView, (cx, h*0.40), relu, w*0.72, h*0.24);
  network(model, (cx, h*0.42), "3 6 4 3", "relu tanh softmax", w*0.55, h*0.32, 21);
}
else if w > 1.25*h {
  watermark(manicMark, (w*0.18, h*0.10), "Made With Manic");
  text(kicker, (cx, h*0.075), "MANIC ML · FORWARD PASS");
  text(headline, (cx, h*0.14), "How does a network choose?");
  text(caption, (cx, h*0.83), "First, a neuron keeps positive evidence and removes negative evidence.");
  activation(reluView, (cx, h*0.49), relu, w*0.42, h*0.36);
  network(model, (cx, h*0.47), "3 6 4 3", "relu tanh softmax", w*0.64, h*0.39, 21);
}
else {
  watermark(manicMark, (w*0.18, h*0.08), "Made With Manic");
  text(kicker, (cx, h*0.07), "MANIC ML · FORWARD PASS");
  text(headline, (cx, h*0.13), "How does a network choose?");
  text(caption, (cx, h*0.82), "First, a neuron keeps positive evidence and removes negative evidence.");
  activation(reluView, (cx, h*0.43), relu, w*0.68, h*0.30);
  network(model, (cx, h*0.45), "3 6 4 3", "relu tanh softmax", w*0.64, h*0.40, 21);
}

size(kicker, 20*u); color(kicker, dim); bold(kicker); hidden(kicker);
size(headline, 36*u); bold(headline); hidden(headline);
size(caption, 22*u); color(caption, dim); wrap(caption, w*0.78); hidden(caption);

// A truthful ReLU curve introduces the operation used by the hidden layer.
hidden(reluView);
untraced(reluView.axes);
untraced(reluView.curve);

// 3 inputs → 6 ReLU units → 4 tanh units → 3 softmax probabilities.
// Seed 21 makes the educational model reproducible across every render.
hidden(model);

step("activation") {
  show(kicker, 0.35);
  show(headline, 0.45);
  show(caption, 0.40);
  show(reluView, 0.55);
  draw(reluView.axes, 0.70);
  draw(reluView.curve, 1.20);
}
wait(0.75);

step("meet-the-network") {
  fade(reluView, 0.45);
  show(model, 0.65);
  say(caption, "The same operation now lives inside a small, deterministic network.", 0.45);
}
wait(0.65);

step("forward-pass") {
  par {
    forward(model, "0.15 0.92 0.38", 4.20, smooth);
    say(caption, "Follow the bright path: inputs become evidence, then probabilities.", 0.45);
    seq {
      par { cam((w*0.24, h*0.47), 0.55, smooth); zoom(1.06, 0.55, smooth); }
      wait(0.55);
      cam((cx, h*0.47), 0.80, smooth);
      wait(0.55);
      cam((w*0.76, h*0.47), 0.80, smooth);
      wait(0.40);
      par { cam((cx, cy), 0.55, smooth); zoom(1.0, 0.55, smooth); }
    }
  }
}
wait(0.90);

step("takeaway") {
  pulse(model.output, 0.75);
  say(caption, "The picture is driven by the computed values—not a decorative animation.", 0.45);
}
wait(1.60);

The ML2 story keeps one network on screen through prediction, target, loss, backward credit assignment, and a visibly recomputed gradient update:

// manic-ml-learning-step.manic — ML2 creator proof
// One persistent network predicts, measures its mistake, sends exact gradients
// backward, changes its parameters, then rolls that one saved change back.
// No layer is cleared and redrawn; rollback is not claimed as full unlearning.

title("Manic ML — How One Mistake Becomes Learning");
canvas("16:9");
template("mono");

creator(me, "@anish2good name=Manic_ML tagline=Models_made_visible yt=zarigatongy x=@anish2good web=8gwifi.org/manic accent=cyan secondary=magenta footer=compact cta=See_the_learning safe=clean");
socials(me);

let u = (w+h-abs(w-h))/1440;

if h > 1.45*w {
  watermark(manicMark, (w*0.13, h*0.075), "Made With Manic");
  text(kicker, (cx, h*0.08), "MANIC ML · ONE LEARNING STEP");
  text(headline, (cx, h*0.13), "How does a model learn?");
  text(caption, (cx, h*0.72), "First the network predicts from the current weights.");
  network(model, (cx, h*0.42), "3 6 4 3", "relu tanh softmax", w*0.55, h*0.32, 21);
}
else if w > 1.25*h {
  watermark(manicMark, (w*0.18, h*0.10), "Made With Manic");
  text(kicker, (cx, h*0.075), "MANIC ML · ONE LEARNING STEP");
  text(headline, (cx, h*0.14), "How does a model learn?");
  text(caption, (cx, h*0.83), "First the network predicts from the current weights.");
  network(model, (cx, h*0.47), "3 6 4 3", "relu tanh softmax", w*0.64, h*0.39, 21);
}
else {
  watermark(manicMark, (w*0.18, h*0.08), "Made With Manic");
  text(kicker, (cx, h*0.07), "MANIC ML · ONE LEARNING STEP");
  text(headline, (cx, h*0.13), "How does a model learn?");
  text(caption, (cx, h*0.82), "First the network predicts from the current weights.");
  network(model, (cx, h*0.45), "3 6 4 3", "relu tanh softmax", w*0.64, h*0.40, 21);
}

size(kicker, 20*u); color(kicker, dim); bold(kicker); hidden(kicker);
size(headline, 35*u); bold(headline); wrap(headline, w*0.82); hidden(headline);
size(caption, 22*u); color(caption, dim); wrap(caption, w*0.78); hidden(caption);
hidden(model);

step("question") {
  show(kicker, 0.35);
  show(headline, 0.45);
  show(caption, 0.40);
  show(model, 0.65);
}
wait(0.55);

step("predict") {
  par {
    forward(model, "0.15 0.92 0.38", 3.20, smooth);
    say(caption, "A forward pass turns the input into three probabilities.", 0.40);
  }
}
wait(0.55);

step("measure-the-mistake") {
  par {
    loss(model, "1 0 0", crossentropy, 1.50, smooth);
    say(caption, "The correct answer is class 1. Cross-entropy measures the mismatch.", 0.40);
  }
}
wait(0.55);

step("send-credit-backward") {
  par {
    backward(model, 3.20, smooth);
    say(caption, "The gradient carries responsibility backward through the same connections.", 0.40);
    seq {
      par { cam((w*0.76, h*0.47), 0.40, smooth); zoom(1.08, 0.40, smooth); }
      wait(0.30);
      cam((cx, h*0.47), 0.55, smooth);
      wait(0.25);
      cam((w*0.24, h*0.47), 0.55, smooth);
      wait(0.25);
      par { cam((cx, cy), 0.45, smooth); zoom(1.0, 0.45, smooth); }
    }
  }
}
wait(0.55);

// A zero-duration authored checkpoint captures the exact pre-update weights,
// prediction, target, and loss. It does not add a hidden runtime state.
checkpoint(beforeUpdate, model);

step("learn") {
  par {
    update(model, 0.18, 2.30, smooth);
    say(caption, "Each parameter moves opposite its gradient; the same input is computed again.", 0.40);
  }
}
wait(0.70);

step("unlearn") {
  par {
    restore(model, beforeUpdate, 2.30, smooth);
    say(caption, "Exact rollback restores the saved parameters and their earlier prediction.", 0.40);
    seq {
      par { cam((w*0.24, h*0.47), 0.40, smooth); zoom(1.08, 0.40, smooth); }
      wait(0.30);
      cam((cx, h*0.47), 0.55, smooth);
      wait(0.25);
      cam((w*0.76, h*0.47), 0.55, smooth);
      wait(0.25);
      par { cam((cx, cy), 0.45, smooth); zoom(1.0, 0.45, smooth); }
    }
  }
}
wait(0.70);

step("takeaway") {
  pulse(model.output, 0.75);
  say(caption, "This undoes one saved update. Dataset-level unlearning is a different process.", 0.45);
}
wait(1.50);

The ML3 story turns a small image into an edge-response feature map and then a pooled summary, with the same scanner serving both operators:

// manic-ml-cnn-edge-story.manic — ML3 creator proof
// A tiny image becomes a feature map and then a pooled summary. Every number is
// computed by Manic; scan coordinates the receptive field and destination.

title("Manic ML — How a CNN Finds an Edge");
canvas("16:9");
template("mono");

creator(me, "@anish2good name=Manic_ML tagline=Models_made_visible yt=zarigatongy x=@anish2good web=8gwifi.org/manic accent=cyan secondary=magenta footer=compact cta=See_the_feature safe=clean");
socials(me);

let u = (w+h-abs(w-h))/1440;
let cell = 48*u;

if h > 1.45*w {
  watermark(manicMark, (w*0.13, h*0.075), "Made With Manic");
  text(kicker, (cx, h*0.08), "MANIC ML · CONVOLUTION");
  text(headline, (cx, h*0.13), "How does a CNN see edges?");
  text(caption, (cx, h*0.72), "Start with a tiny image: bright cells form a simple shape.");
  tensor(image, (w*0.28, h*0.35), "0 0 0 0 0; 0 0 1 1 0; 0 1 1 1 0; 0 0 1 1 0; 0 0 0 0 0", cell, cyan);
  kernel(edge, (w*0.72, h*0.35), "-1 0 1; -2 0 2; -1 0 1", cell, magenta);
  convolve(feature, image, edge, (w*0.34, h*0.54), 1, 0, 0, relu, cell);
  pool(pooled, feature, (w*0.72, h*0.54), max, 2, 1, 0, cell);
}
else if w > 1.25*h {
  watermark(manicMark, (w*0.18, h*0.10), "Made With Manic");
  text(kicker, (cx, h*0.075), "MANIC ML · CONVOLUTION");
  text(headline, (cx, h*0.14), "How does a CNN see edges?");
  text(caption, (cx, h*0.82), "Start with a tiny image: bright cells form a simple shape.");
  tensor(image, (w*0.17, h*0.47), "0 0 0 0 0; 0 0 1 1 0; 0 1 1 1 0; 0 0 1 1 0; 0 0 0 0 0", cell, cyan);
  kernel(edge, (w*0.42, h*0.47), "-1 0 1; -2 0 2; -1 0 1", cell, magenta);
  convolve(feature, image, edge, (w*0.68, h*0.47), 1, 0, 0, relu, cell);
  pool(pooled, feature, (w*0.89, h*0.47), max, 2, 1, 0, cell);
}
else {
  watermark(manicMark, (w*0.18, h*0.08), "Made With Manic");
  text(kicker, (cx, h*0.07), "MANIC ML · CONVOLUTION");
  text(headline, (cx, h*0.13), "How does a CNN see edges?");
  text(caption, (cx, h*0.82), "Start with a tiny image: bright cells form a simple shape.");
  tensor(image, (w*0.18, h*0.44), "0 0 0 0 0; 0 0 1 1 0; 0 1 1 1 0; 0 0 1 1 0; 0 0 0 0 0", cell, cyan);
  kernel(edge, (w*0.45, h*0.44), "-1 0 1; -2 0 2; -1 0 1", cell, magenta);
  convolve(feature, image, edge, (w*0.70, h*0.44), 1, 0, 0, relu, cell);
  pool(pooled, feature, (w*0.89, h*0.44), max, 2, 1, 0, cell);
}

size(kicker, 20*u); color(kicker, dim); bold(kicker); hidden(kicker);
size(headline, 35*u); bold(headline); wrap(headline, w*0.82); hidden(headline);
size(caption, 22*u); color(caption, dim); wrap(caption, w*0.78); hidden(caption);
hidden(image); hidden(edge); hidden(feature); hidden(pooled);

step("pixels") {
  show(kicker, 0.35);
  show(headline, 0.45);
  show(caption, 0.40);
  show(image, 0.65);
}
wait(0.55);

step("edge-detector") {
  show(edge, 0.55);
  say(caption, "This 3×3 kernel compares the left side of each patch with the right.", 0.40);
}
wait(0.55);

step("feature-map") {
  show(feature, 0.50);
  say(caption, "The feature map begins quiet; each destination waits for one receptive field.", 0.40);
}
wait(0.35);

step("convolution-scan") {
  par {
    scan(feature, 4.80, smooth);
    say(caption, "The same kernel slides, multiplies, sums, applies ReLU, and writes one cell.", 0.40);
    seq {
      par { cam((w*0.38, h*0.45), 0.75, smooth); zoom(1.10, 0.75, smooth); }
      wait(2.95);
      par { cam((cx, cy), 0.85, smooth); zoom(1.0, 0.85, smooth); }
    }
  }
}
wait(0.60);

step("pooling-map") {
  show(pooled, 0.50);
  say(caption, "Max pooling asks a simpler question: where is the strongest local evidence?", 0.40);
}
wait(0.40);

step("pooling-scan") {
  par {
    scan(pooled, 3.40, smooth);
    say(caption, "Each 2×2 window keeps its first maximum; ties are deterministic.", 0.40);
  }
}
wait(0.70);

step("takeaway") {
  pulse(pooled.cells, 0.75);
  say(caption, "A CNN builds meaning locally: pixels → feature responses → compact evidence.", 0.45);
}
wait(1.50);

The ML5 story begins with a repeated word, proves that its base lookup vector is reused, and then shows how sinusoidal position makes each occurrence unique:

// manic-ml-token-embedding.manic — ML5 acceptance story
// A repeated word keeps one seeded educational token embedding, while exact
// sinusoidal position makes each occurrence a different model input.

title("Manic ML — From Words to Positioned Embeddings");
canvas("16:9");
template("mono");

creator(me, "@anish2good name=Manic_ML tagline=Models_made_visible yt=zarigatongy x=@anish2good web=8gwifi.org/manic accent=cyan secondary=magenta footer=compact cta=Follow_the_representation safe=clean");
socials(me);

let u = (w+h-abs(w-h))/1440;

if h > 1.45*w {
  watermark(manicMark, (w*0.16, h*0.055), "Made With Manic");
  text(kicker, (cx, h*0.055), "MANIC ML · EMBEDDINGS");
  text(headline, (cx, h*0.095), "A word needs meaning—and a place");
  text(caption, (cx, h*0.84), "Start with text. Keep every boundary and every number inspectable.");

  tokenize(words, (cx, h*0.19), "the cat chased the cat", word, w*0.80);
  embedding(context, words, (cx, h*0.50), "seeded 6 37", sinusoidal, w*0.90, h*0.48);
}
else if w > 1.25*h {
  watermark(manicMark, (w*0.16, h*0.08), "Made With Manic");
  text(kicker, (cx, h*0.07), "MANIC ML · EMBEDDINGS");
  text(headline, (cx, h*0.125), "A word needs meaning—and a place");
  text(caption, (cx, h*0.84), "Start with text. Keep every boundary and every number inspectable.");

  tokenize(words, (cx, h*0.23), "the cat chased the cat", word, w*0.68);
  embedding(context, words, (cx, h*0.54), "seeded 6 37", sinusoidal, w*0.90, h*0.48);
}
else {
  watermark(manicMark, (w*0.18, h*0.08), "Made With Manic");
  text(kicker, (cx, h*0.06), "MANIC ML · EMBEDDINGS");
  text(headline, (cx, h*0.17), "A word needs meaning—and a place");
  text(caption, (cx, h*0.83), "Start with text. Keep every boundary and every number inspectable.");

  tokenize(words, (cx, h*0.30), "the cat chased the cat", word, w*0.76);
  embedding(context, words, (cx, h*0.60), "seeded 6 37", sinusoidal, w*0.90, h*0.38);
}

size(kicker, 18*u); color(kicker, dim); bold(kicker); hidden(kicker);
size(headline, 32*u); bold(headline); wrap(headline, w*0.84); hidden(headline);
size(caption, 20*u); color(caption, dim); wrap(caption, w*0.82); hidden(caption);
hidden(words);
hidden(context);

step("sentence") {
  show(kicker, 0.30);
  show(headline, 0.42);
  show(words.labels, 0.35);
  show(words.source, 0.40);
  show(caption, 0.35);
}
wait(0.55);

step("tokens") {
  par {
    show(words.tokens, 0.75);
    show(words.indices, 0.75);
    say(caption, "Word tokenization turns the sentence into five ordered identities.", 0.38);
  }
}
wait(0.60);

step("lookup") {
  fade(words, 0.35);
  par {
    show(context.labels, 0.40);
    show(context.tokens, 0.55);
    show(context.vectors, 0.95);
    say(caption, "A seeded educational lookup gives each token identity one six-number vector.", 0.40);
  }
}
wait(0.60);

step("same-word") {
  par {
    pulse(context.row1, 0.70);
    pulse(context.row4, 0.70);
    say(caption, "Both copies of cat reuse the same base embedding. The lookup depends on the token—not its location.", 0.42);
  }
}
wait(0.65);

step("position") {
  par {
    show(context.positions, 1.00);
    show(context.operators, 0.45);
    say(caption, "Sinusoidal position adds a deterministic coordinate for places 0 through 4.", 0.42);
  }
}
wait(0.65);

step("model-input") {
  par {
    show(context.combined, 1.00);
    say(caption, "Token vector plus position becomes the model input. The repeated word now carries two different locations.", 0.42);
  }
}
wait(0.70);

step("takeaway") {
  par {
    pulse(context.row1, 0.72);
    pulse(context.row4, 0.72);
    say(caption, "Meaning says what the token is. Position says where this occurrence belongs.", 0.42);
  }
}
wait(1.40);

The ML4 story keeps the token lanes visible while one query reveals Q/K/V, one truthful softmax row, its weighted value mix, the residual, and a small candidate ranking:

// manic-ml-transformer-attention.manic — ML4 acceptance story
// Explicit token embeddings become Q/K/V, one query row becomes normalized
// attention weights, values mix, a residual is added, and a real output
// projection produces top-k probabilities.

title("Manic ML — One Transformer Attention Head");
canvas("16:9");
template("mono");

creator(me, "@anish2good name=Manic_ML tagline=Models_made_visible yt=zarigatongy x=@anish2good web=8gwifi.org/manic accent=cyan secondary=magenta footer=compact cta=Follow_the_attention safe=clean");
socials(me);

let u = (w+h-abs(w-h))/1440;

if h > 1.45*w {
  watermark(manicMark, (w*0.15, h*0.06), "Made With Manic");
  text(kicker, (cx, h*0.065), "MANIC ML · SELF-ATTENTION");
  text(headline, (cx, h*0.105), "One token finds context");
  text(caption, (cx, h*0.84), "Start with explicit token embeddings—not decorative wires.");

  attention(head, (cx, h*0.38), "Art | ificial | intelligence | transforms | business",
    "1 0.2 -0.4 0.7; 0.8 0.1 -0.3 0.6; -0.2 1 0.5 0.3; 0.1 0.6 0.9 -0.2; 0.7 -0.1 0.4 1",
    w*0.82, h*0.40, 23);
  topk(next, head, 3, (cx, h*0.71), "business | work | world | industry | future | people", 4, w*0.72, h*0.18, 29);
}
else if w > 1.25*h {
  watermark(manicMark, (w*0.17, h*0.09), "Made With Manic");
  text(kicker, (cx, h*0.075), "MANIC ML · SELF-ATTENTION");
  text(headline, (cx, h*0.14), "One token finds context");
  text(caption, (cx, h*0.83), "Start with explicit token embeddings—not decorative wires.");

  attention(head, (w*0.40, h*0.48), "Art | ificial | intelligence | transforms | business",
    "1 0.2 -0.4 0.7; 0.8 0.1 -0.3 0.6; -0.2 1 0.5 0.3; 0.1 0.6 0.9 -0.2; 0.7 -0.1 0.4 1",
    w*0.68, h*0.58, 23);
  topk(next, head, 3, (w*0.84, h*0.52), "business | work | world | industry | future | people", 4, w*0.26, h*0.34, 29);
}
else {
  watermark(manicMark, (w*0.18, h*0.08), "Made With Manic");
  text(kicker, (cx, h*0.06), "MANIC ML · SELF-ATTENTION");
  text(headline, (cx, h*0.13), "One token finds context");
  text(caption, (cx, h*0.84), "Start with explicit token embeddings—not decorative wires.");

  attention(head, (cx, h*0.39), "Art | ificial | intelligence | transforms | business",
    "1 0.2 -0.4 0.7; 0.8 0.1 -0.3 0.6; -0.2 1 0.5 0.3; 0.1 0.6 0.9 -0.2; 0.7 -0.1 0.4 1",
    w*0.84, h*0.42, 23);
  topk(next, head, 3, (cx, h*0.72), "business | work | world | industry | future | people", 4, w*0.72, h*0.18, 29);
}

size(kicker, 19*u); color(kicker, dim); bold(kicker); hidden(kicker);
size(headline, 34*u); bold(headline); wrap(headline, w*0.82); hidden(headline);
size(caption, 21*u); color(caption, dim); wrap(caption, w*0.78); hidden(caption);
hidden(head); hidden(next);

step("tokens") {
  show(kicker, 0.35);
  show(headline, 0.45);
  show(caption, 0.40);
  show(head.labels, 0.40);
  show(head.tokens, 0.60);
}
wait(0.55);

step("projections") {
  par {
    show(head.q, 0.55);
    show(head.k, 0.55);
    show(head.v, 0.55);
    say(caption, "Each embedding is projected into a Query, Key, and Value vector.", 0.40);
  }
}
wait(0.60);

step("scores") {
  show(head.matrix, 0.70);
  say(caption, "Scaled dot products become one softmax row: every weight is positive and the row sums to 100%.", 0.45);
}
wait(0.65);

step("attend") {
  par {
    attend(head, 3, 5.20, smooth);
    say(caption, "Focus intelligence: Q asks, K measures relevance, and weighted V carries the context.", 0.45);
    seq {
      par { cam((cx, h*0.46), 0.75, smooth); zoom(1.07, 0.75, smooth); }
      wait(3.45);
      par { cam((cx, cy), 0.85, smooth); zoom(1.0, 0.85, smooth); }
    }
  }
}
wait(0.75);

step("prediction") {
  show(next, 0.70);
  say(caption, "The residual plus attention mix enters an output projection and a truthful softmax ranking.", 0.45);
}
wait(0.80);

step("takeaway") {
  pulse(next.rank0, 0.75);
  say(caption, "Attention is selective information flow—not every connection shouting at once.", 0.45);
}
wait(1.50);

The ML6 story preserves one token lane through two causal heads, concatenation, both residual/norm stages, a GELU MLP, and the exact settled block output:

// manic-ml-transformer-block.manic — ML6 acceptance story
// One persistent token lane passes through multi-head causal attention,
// concatenation, two residual paths, pre-normalization, and a GELU MLP.

title("Manic ML — Inside One Transformer Block");
canvas("16:9");
template("mono");

creator(me, "@anish2good name=Manic_ML tagline=Models_made_visible yt=zarigatongy x=@anish2good web=8gwifi.org/manic accent=cyan secondary=magenta footer=compact cta=Follow_the_computation safe=clean");
socials(me);

let u = (w+h-abs(w-h))/1440;

if h > 1.45*w {
  watermark(manicMark, (w*0.15, h*0.06), "Made With Manic");
  text(kicker, (cx, h*0.065), "MANIC ML · TRANSFORMER BLOCK");
  text(headline, (cx, h*0.105), "Inside one transformer block");
  text(caption, (cx, h*0.84), "Follow one token lane through every computed stage.");

  tokenize(words, (cx, h*0.15), "the cat slept because it dreamed", word, w*0.82);
  embedding(context, words, (cx, h*0.41), "seeded 6 37", sinusoidal, w*0.90, h*0.38);
  transformer(block, context, (cx, h*0.49), "heads=2 mask=causal mlp=12 activation=gelu norm=pre dropout=0 mode=inference seed=41", w*0.90, h*0.56);
}
else if w > 1.25*h {
  watermark(manicMark, (w*0.17, h*0.09), "Made With Manic");
  text(kicker, (cx, h*0.065), "MANIC ML · TRANSFORMER BLOCK");
  text(headline, (cx, h*0.14), "Inside one transformer block");
  text(caption, (cx, h*0.82), "Follow one token lane through every computed stage.");

  tokenize(words, (cx, h*0.22), "the cat slept because it dreamed", word, w*0.72);
  embedding(context, words, (cx, h*0.54), "seeded 6 37", sinusoidal, w*0.90, h*0.48);
  transformer(block, context, (cx, h*0.52), "heads=2 mask=causal mlp=12 activation=gelu norm=pre dropout=0 mode=inference seed=41", w*0.92, h*0.62);
}
else {
  watermark(manicMark, (w*0.18, h*0.08), "Made With Manic");
  text(kicker, (cx, h*0.06), "MANIC ML · TRANSFORMER BLOCK");
  text(headline, (cx, h*0.13), "Inside one transformer block");
  text(caption, (cx, h*0.83), "Follow one token lane through every computed stage.");

  tokenize(words, (cx, h*0.23), "the cat slept because it dreamed", word, w*0.78);
  embedding(context, words, (cx, h*0.52), "seeded 6 37", sinusoidal, w*0.90, h*0.44);
  transformer(block, context, (cx, h*0.52), "heads=2 mask=causal mlp=12 activation=gelu norm=pre dropout=0 mode=inference seed=41", w*0.90, h*0.57);
}

size(kicker, 18*u); color(kicker, dim); bold(kicker); hidden(kicker);
size(headline, 30*u); bold(headline); wrap(headline, w*0.86); hidden(headline);
size(caption, 19*u); color(caption, dim); wrap(caption, w*0.84); hidden(caption);
hidden(words);
hidden(context);
hidden(block);

step("tokens") {
  par {
    show(kicker, 0.28);
    show(headline, 0.42);
    show(words.labels, 0.30);
    show(words.source, 0.36);
    show(words.tokens, 0.70);
    show(words.indices, 0.70);
    show(caption, 0.32);
    say(caption, "Six ordered tokens begin as one persistent lane.", 0.36);
  }
}
wait(0.55);

step("model-input") {
  seq {
    fade(words, 0.32);
    par {
      show(context.labels, 0.32);
      show(context.tokens, 0.42);
      show(context.vectors, 0.82);
      say(caption, "Each identity receives a stable lookup vector.", 0.36);
    }
    par {
      show(context.positions, 0.72);
      show(context.operators, 0.34);
      show(context.combined, 0.78);
      say(caption, "Position is added exactly. These six vectors are the block input.", 0.38);
    }
  }
}
wait(0.60);

step("encode") {
  seq {
    par {
      fade(context, 0.34);
      fade(caption, 0.24);
    }
    par {
      encode(block, 6.2, smooth);
      seq {
        par { cam((cx - w*0.25, h*0.52), 0.75, smooth); zoom(1.08, 0.75, smooth); }
        wait(1.35);
        cam((cx + w*0.17, h*0.52), 1.15, smooth);
        wait(1.50);
        par { cam((cx, cy), 0.85, smooth); zoom(1.0, 0.85, smooth); }
      }
    }
  }
}
wait(0.70);

step("takeaway") {
  seq {
    show(caption, 0.20);
    par {
      pulse(block.residual1, 0.72);
      pulse(block.residual2, 0.72);
      pulse(block.output, 0.72);
      say(caption, "Attention shares context. The MLP reshapes each token. Residuals keep its identity continuous.", 0.42);
    }
  }
}
wait(1.35);

The ML7 story compares the same projection at cool and warm temperatures, then shows greedy and top-p decoding as exact filtered distributions and one seeded next-token choice:

// manic-ml-logits-sampling.manic — ML7 acceptance story
// The same LM projection is viewed at two temperatures, then top-p sampling
// filters, renormalizes, and makes one reproducible next-token choice.

title("Manic ML — How a Transformer Chooses the Next Token");
canvas("16:9");
template("mono");

creator(me, "@anish2good name=Manic_ML tagline=Models_made_visible yt=zarigatongy x=@anish2good web=8gwifi.org/manic accent=cyan secondary=magenta footer=compact cta=Follow_the_computation safe=clean");
socials(me);

let u = (w+h-abs(w-h))/1440;

if h > 1.45*w {
  watermark(manicMark, (w*0.15, h*0.06), "Made With Manic");
  text(kicker, (cx, h*0.07), "MANIC ML · LOGITS → PROBABILITIES → TOKEN");
  text(headline, (cx, h*0.115), "How does a transformer choose its next word?");
  text(caption, (cx, h*0.83), "One hidden vector. One full distribution. One reproducible choice.");

  tokenize(words, (cx, h*0.17), "the model learned to", word, w*0.78);
  embedding(context, words, (cx, h*0.42), "seeded 6 37", sinusoidal, w*0.88, h*0.34);
  transformer(block, context, (cx, h*0.47), "heads=2 mask=causal mlp=12 activation=gelu norm=pre dropout=0 mode=inference seed=41", w*0.90, h*0.50);
  logits(cool, block, 4, (cx, h*0.51), "reason | predict | learn | adapt | explain | .", 0.55, w*0.86, h*0.54, 73);
  logits(warm, block, 4, (cx, h*0.51), "reason | predict | learn | adapt | explain | .", 1.45, w*0.86, h*0.54, 73);
}
else if w > 1.25*h {
  watermark(manicMark, (w*0.17, h*0.09), "Made With Manic");
  text(kicker, (cx, h*0.065), "MANIC ML · LOGITS → PROBABILITIES → TOKEN");
  text(headline, (cx, h*0.13), "How does a transformer choose its next word?");
  text(caption, (cx, h*0.82), "One hidden vector. One full distribution. One reproducible choice.");

  tokenize(words, (cx, h*0.21), "the model learned to", word, w*0.64);
  embedding(context, words, (cx, h*0.50), "seeded 6 37", sinusoidal, w*0.88, h*0.42);
  transformer(block, context, (cx, h*0.50), "heads=2 mask=causal mlp=12 activation=gelu norm=pre dropout=0 mode=inference seed=41", w*0.90, h*0.58);
  logits(cool, block, 4, (cx, h*0.51), "reason | predict | learn | adapt | explain | .", 0.55, w*0.78, h*0.54, 73);
  logits(warm, block, 4, (cx, h*0.51), "reason | predict | learn | adapt | explain | .", 1.45, w*0.78, h*0.54, 73);
}
else {
  watermark(manicMark, (w*0.18, h*0.08), "Made With Manic");
  text(kicker, (cx, h*0.065), "MANIC ML · LOGITS → PROBABILITIES → TOKEN");
  text(headline, (cx, h*0.155), "How does a transformer choose its next word?");
  text(caption, (cx, h*0.82), "One hidden vector. One full distribution. One reproducible choice.");

  tokenize(words, (cx, h*0.21), "the model learned to", word, w*0.70);
  embedding(context, words, (cx, h*0.50), "seeded 6 37", sinusoidal, w*0.88, h*0.40);
  transformer(block, context, (cx, h*0.50), "heads=2 mask=causal mlp=12 activation=gelu norm=pre dropout=0 mode=inference seed=41", w*0.90, h*0.55);
  logits(cool, block, 4, (cx, h*0.51), "reason | predict | learn | adapt | explain | .", 0.55, w*0.82, h*0.54, 73);
  logits(warm, block, 4, (cx, h*0.51), "reason | predict | learn | adapt | explain | .", 1.45, w*0.82, h*0.54, 73);
}

size(kicker, 17*u); color(kicker, dim); bold(kicker); hidden(kicker);
size(headline, 29*u); bold(headline); wrap(headline, w*0.88); hidden(headline);
size(caption, 18*u); color(caption, dim); wrap(caption, w*0.86); hidden(caption);
hidden(words);
hidden(context);
hidden(block);
hidden(cool);
hidden(warm);

step("prompt") {
  par {
    show(kicker, 0.28);
    show(headline, 0.42);
    show(words.labels, 0.28);
    show(words.source, 0.34);
    show(words.tokens, 0.62);
    show(words.indices, 0.62);
    show(caption, 0.28);
    say(caption, "The prompt becomes an ordered token lane.", 0.34);
  }
}
wait(0.45);

step("hidden-state") {
  seq {
    fade(words, 0.28);
    par {
      show(block.output, 0.70);
      show(block.labels, 0.26);
      say(caption, "The transformer MLP ends at a hidden representation—not probabilities.", 0.40);
    }
    pulse(block.output, 0.72);
  }
}
wait(0.45);

step("cool-temperature") {
  seq {
    fade(block, 0.30);
    sample(cool, "greedy", 3.4, smooth);
    say(caption, "Low temperature sharpens every candidate. Greedy keeps only the maximum.", 0.42);
  }
}
wait(0.65);

step("warm-temperature") {
  seq {
    fade(cool, 0.30);
    sample(warm, "top-p 0.90 seed=17", 3.8, smooth);
    say(caption, "Higher temperature spreads the full softmax. Top-p keeps the smallest 90% nucleus, renormalizes it, then samples.", 0.46);
  }
}
wait(0.75);

step("takeaway") {
  par {
    pulse(warm.temperature, 0.70);
    pulse(warm.probabilities, 0.70);
    say(caption, "Temperature reshapes probability. Sampling turns that distribution into one reproducible next token.", 0.44);
  }
}
wait(1.30);

Kits — domain knowledge, ordinary Manic composition

The words so far (circle, move, flash, for…) are the core. On top of that, manic ships kits — bundles of higher-level figures for a domain. You use them exactly like any other call.

math

Coordinate frames, function plots, vectors, tables:

axes(ax, (cx, cy), 520, 240);            // a coordinate frame
plot(wave, (cx, cy), 78, 120, "sin(x)"); // y = f(x) from a formula
tangent(t, wave, 0.5);                    // the tangent line + dot at x = 0.5
vector(v, (cx, cy), (120, -90));         // an arrow from an origin
matrix(m, "1 0; 0 1", (cx, cy));         // a bracketed matrix

geo

Olympiad-style constructions — you write the geometry, not coordinates, and everything is live (drag a point and the circumcircle, centroid, angles all recompute):

point(A, (300, 500));  point(B, (900, 500));  point(C, (620, 180));
circumcircle(cc, A, B, C);   // recomputes if A/B/C move
midpoint(m, A, B);

algo

Data structures and algorithms — arrays + sorting, linked lists, stacks/queues, graphs, hash maps, BFS/DFS, Dijkstra:

array(a, "5 2 8 1", (cx, cy));  compare(a, 0, 1);  swap(a, 0, 1);
graph(g, "a b c d", "a-b:2 b-c:1 c-d:3", circular, (cx, cy), 200);
dijkstra(g, a);                 // animates shortest paths

Groups make these one-liners: a graph tags its nodes and edges, so draw(g.edges) or flash(g.nodes, cyan) animates the whole set.

ml

Small neural-network explanations whose displayed activations and probabilities come from the declared model rather than a staged effect:

network(net, (cx, cy), "3 6 4 3", "relu tanh softmax", 820, 350, 21);
forward(net, "0.15 0.92 0.38", 4.2, smooth);
loss(net, "1 0 0", crossentropy, 1.5, smooth);
backward(net, 3.2, smooth);
checkpoint(beforeUpdate, net);
update(net, 0.18, 2.3, smooth);
restore(net, beforeUpdate, 2.3, smooth); // exact rollback, not general unlearning

tensor(image, (260, 340), "0 0 1; 0 1 1; 0 0 1", 44);
kernel(edge, (560, 340), "-1 0 1; -2 0 2; -1 0 1", 44);
convolve(feature, image, edge, (850, 340), 1, 1, 0, relu, 44);
scan(feature, 4.0, smooth);

tokenize(words, (650, 150), "the cat chased the cat", word, 900);
embedding(context, words, (650, 470), "seeded 6 37", sinusoidal, 1080, 430);
transformer(block, context, (650, 500),
  "heads=2 mask=causal mlp=12 activation=gelu norm=pre dropout=0 mode=inference seed=41",
  1120, 520);
encode(block, 6.2, smooth);
logits(next, block, 5, (650, 500),
  "reason | predict | learn | adapt | explain | .", 0.8, 760, 440, 73);
sample(next, "top-p 0.90 seed=17", 3.8, smooth);

attention(head, (650, 360), "Art | ificial | intelligence | transforms | business",
  "1 0.2 -0.4 0.7; 0.8 0.1 -0.3 0.6; -0.2 1 0.5 0.3; 0.1 0.6 0.9 -0.2; 0.7 -0.1 0.4 1",
  980, 420, 23);
attend(head, 3, 5.2, smooth);

Use activation to introduce a scalar activation curve, then network and forward to follow one computation. Add loss, backward, and update for one explicit, numerically truthful learning step. Use tensor, kernel, convolve, pool, and the shared scan for CNN/operator stories. Large layers automatically reduce visual detail without reducing the numerical model. Use tokenize and embedding to reveal honest token boundaries, stable lookup vectors, exact positional values, and their elementwise sum. Use transformer and encode for one complete multi-head block with masking, normalization, residuals, MLP, and truthful training/inference dropout. Use logits and sample to keep the separate LM projection, temperature-scaled full softmax, filtering, renormalization, and seeded next-token choice truthful. Use attention and attend for one focused, exact self-attention head; add topk only when a deterministic educational candidate ranking helps the story. See Machine learning — models made visible.

three (3D)

A whole second world — a camera, solids, surfaces, and curves in real 3D space, which you spin and morph. Every 3D word ends in 3:

camera3((8, -10, 6), (0, 0, 1), 45);      // an eye to look through
cube3(box, (0, 0, 1), (2, 2, 2));         // a shaded box
revolve3(vase, (3, 0, 1.5), "0.7+0.4*sin(t*2)", (0, 3));  // spin a profile
orbit3(70, 25, 12, 4, smooth);            // swing the camera around

It has its own chapter — see Going 3D.

stats

Turn data — or a random process — into a picture that reveals its shape, centre, and spread. Each builtin animates a process: a histogram builds up bar by bar, sample means pile into a bell, a running proportion settles onto the truth.

histogram(h, (cx, cy), "72 85 90 68 95 88 76 91 83", 8, 640, 300, rainbow);
bellcurve(b, (cx, cy), 100, 15);          // the 68-95-99.7 rule
clt(c, (cx, cy), 5, 1200);                 // the Central Limit Theorem

histogram · summary · boxplot · skew · bellcurve · correlation · lln · clt · hypothesis · covariance · bayes · distribution · confidence · montecarlo · randomwalk. Seeded, so renders are reproducible.

physics

Simulations built from their physics and pre-simulated with RK4 at build time, so every render is deterministic. Each sim’s parts are ordinary manic entities, and the optional views (phase · well · timegraph · energygraph) show the same motion as math panels. run(id) (alias swing) plays it.

pendulum(p, (cx, 200), 2, 50);   phase(p, (980, 200), 120);
well(p, (980, 470), 120);        run(p, 8);   // one swing, three views
doublependulum(dp, (400, 240));  par { run(dp, 12); draw(dp.path, 12); }  // chaos

Pendulum family: pendulum · doublependulum · springpendulum · kapitza · cartpendulum · comparependulum. Spring family: spring · verticalspring · springincline · bungee · resonance · doublespring · seriesparallel · carsuspension. Mechanics: robotarm · piston · molecule · ramp (with a forces(id) free-body diagram) · inclinepulley · doubleincline · inclinebumper · springchain · looptrack (a curved-track loop-the-loop) · stringwave (a wave on a string) · newtonscradle · collideblocks · bulletblock (event-driven collisions) · dropmass · raft · brachistochrone. Pulleys: pulley (Atwood) · pulleyscale (reads the tension) · blocktackle (N-strand block & tackle) · compoundpulley (fixed + movable, masses A/B/C).

Because a sim’s parts are ordinary entities, any base look composes over them — e.g. template("paper") + a hatched support turns a pulley or spring into a textbook figure (see Elevating a scene and the *-paper examples).

optics

Light as geometry, with the real physics underneath — Snell’s law, Sellmeier dispersion, and full spherical/aspheric ray tracing — so the bending, the colours and the focus are earned, not painted. Each builtin is static geometry that animates by a parameter sweep (run(id)) or by sketching its rays on (draw(id.rays)).

refract(r, (640, 380), 1.0, 1.52);   run(r, 7);   // Snell's law; run sweeps the angle (→ TIR)
lens(l, (620, 360));                 run(l, 7);   // parallel rays → a focal point
prism(p, (560, 400), "sf11");        run(p, 7);   // white light → a real rainbow (dispersion)

Foundations: refract (Snell + total internal reflection) · lens (a converging thin lens). Dispersion: prism (white → spectrum) · achromat (chromatic aberration → the doublet fix). Real lenses: lenssystem(id, [center], [preset], [object]) traces a prescription through its actual spherical/aspheric surfaces — pick a design by name ("singlet", "plano-convex", "aspheric", "doublet", "triplet") or write your own surface table "radius thickness glass [conic] [aperture] | …"; an optional finite object distance images a nearby point. Analysis: rayfan (the ray-fan aberration plot) · spotdiagram (the on-axis spot at focus) · fieldspot(id, [center], [preset], [field]) (the off-axis spot — a coma comet / astigmatic blur, with an Airy-disk diffraction-limit overlay). A rainbow glows on the dark bench; the geometric ray diagrams also take template("paper") for a textbook look.

creator

A format layer (not a subject): responsive, pre-timed social-video templates a content creator fills in—question, answers, media and a reusable profile. V2 adapts the same source to 9:16, 4:5, 1:1 and 16:9, with named platform safe areas, a polished studio default, configurable motion/timers, responsive footers and end cards.

canvas("9:16"); template("shorts");
creator(me, "@anish2good name=Math_With_Me yt=zarigatongy x=@anish2good web=8gwifi.org/manic footer=social accent=magenta");
quiz(q, "What is 7 x 8?", "studio labels=letters pace=calm motion=calm");
option(q, "54"); option(q, "56", correct); option(q, "48"); option(q, "63");
timerstyle(q, "look=segments position=media finish=pulse");
run(q, 8);                                  // scales the calm ask → think → reveal beat
socials(me);
endcard(me);                                // reveal later with show(me.endcard)

quiz(id, "question", ["style"]) starts the format; style mixes a card skin — studio (rounded editorial default) · badge (framed panel + coloured letter badges) · minimal (kicker + accent rule, outline rows) · glass (glowing borders) · plain (flat) — and a question reveal — type (typewriter, default) · fade · rise · pop · cut. option(id, "text", [correct]) adds an answer; run auto-lays-out one to six cards, fits their type, slides them in, plays the selected native timer, and lights up the correct card (green badge + check). timing(id,"preset ask=... options=... think=... reveal=... hold=... stagger=...") separates exact choreography from timerstyle(id,"look=... position=... direction=... finish=..."). The zero-config default remains a balanced draining ring; run(id,dur) scales a preset, while an explicitly timed quiz uses run(id) so authored seconds remain exact. Also standalone: countdown(id, [at], [secs], ["style"]), safezone(id, [inset|"profile"]), figure(target, [center], [size]), optional explain, and endcard. Social icons are vector-drawn with normalized native marks for YouTube, X, Instagram, TikTok, Facebook, LinkedIn, GitHub, web, and email. Profile values appear beside up to three icons; no image or SVG assets are required.

Each kit has a full reference at https://8gwifi.org/manic, and you can see them all in motion in the Examples gallery.

Race charts — paste a table, get a race

The charts kit turns a table into an animated race chart — ranked bars, columns, or lines that reorder over time as the numbers change. It’s the viral data-viz format (GDP, population, brands, sports…), but true to the data and self-contained in one script: no timeline scrubbing, no keyframes.

Three ideas:

1. Declare a chart — racechart(id, layout, periods)
2. Paste the data — racedata(id, "…")
3. Play it — race(id, seconds)

canvas("16:9"); template("blank");

racechart(gdp, "bar", "2000 2010 2020 2024", "GDP by Country ($T)");
racedata(gdp, "
  USA,   us, 10.3, 15.0, 21.4, 27.4
  China, cn,  1.2,  6.1, 14.7, 20.5
  Japan, jp,  4.9,  5.8,  5.0,  4.2
  India, in,  0.5,  1.7,  2.7,  3.9
");
race(gdp, 8);

The bars grow, reorder as ranks change (the reorder is the race), the axis rescales with the running max, and the year + values tick — all from that block.

The data block

racedata(parent, "block") is the heart of it. One row per entity:

label  [icon]  v0  v1  v2  …        ← one value per period

The parser is forgiving so real data pastes straight in:

• Rows split on a newline or a ;.
• Cells split on comma, tab, or whitespace — so a CSV, a TSV, or a spreadsheet copy all work.
• Missing cells count as 0 (e.g. a company/party that didn’t exist yet).
• Multi-word labels are fine when the data is comma- or tab-delimited.

Prefer to build rows in code? raceseries adds one entity at a time — the computed/loop path:

for i in 0..n {
  raceseries(g, name{i}, "rocket", vals{i});   // label, icon, values
}

Icons — any SVG on the bar

The optional icon column puts a flag, logo, or emoji on each bar. It takes any SVG, not just flags:

Icons are imported as real geometry via svg(), so they recolour and scale cleanly. Browse every bundled asset in the SVG catalogue.

A handful of flags whose stars use SVG <use>/<marker> (e.g. China) render imperfectly for now — most flags and all icons/emoji are clean.

Layouts

racechart(id, layout, …) takes one of three:

• "bar" — horizontal bars, ranked top-to-bottom. The classic; gets value gridlines + a live Total readout.
• "column" — vertical bars, ranked left-to-right.
• "line" — each series a line that draws on over time; the race is which line climbs highest (fixed axis, tip labels auto-declutter).

Bar + line, together

On a bar race you can overlay a companion line:

• raceline(parent) — a line across the top showing a running total (auto-summed from the bars), or raceline(parent, "label", "v0 v1 …") for an explicit metric.
• racepanel(parent) — a multi-line history panel below the bars: every series as a line revealed up to a moving time-cursor (the Flourish bar+line combo).

racechart(de, "bar", "1949 … 2021", "German Elections %");
racedata(de, " CDU/CSU, , 31, … ;  SPD, , 29, … ; … ");
racepanel(de);        // history panel below the bars
race(de, 16);

Composing with the rest of manic

A race chart is just tagged entities, so it drops into any scene — a voiced Creator Short, a quiz reveal, a caption sequence. In creator-race-quiz a quiz poses a question and the race chart proves the answer, narrated with speak, closed with a CTA card — the chart running inside a par while the voice-over plays over it.

Examples

• GDP bar race — flags racing, gridlines, total
• Column race — tennis Grand Slams
• Line race — GDP trajectories
• Bar + total line
• Bar + history panel — from a real CSV
• Race-chart quiz Short — voiced, problem→proof→CTA

Diagrams — draw a system, then watch it work

Declare a technical diagram as text and manic animates it — architecture diagrams today, with flows, sequences, and more to come. Declare what belongs where, connect the topology, then follow one message through the design. Manic handles nested responsive layout, provider artwork, parallel lanes, and deterministic motion; ordinary step, show, draw, flow, camera, and text verbs remain the presentation language.

Unlike static diagram-as-code (Mermaid, Mingrammer), a manic diagram moves: the same source that draws the boxes also carries a request through them.

The vocabulary

The whole kit is nine words — a behaviour layer over diagram structure, not a catalogue of cloud verbs:

architecture  cluster  node  connect  link
message       route    hotpath         flow

With them you get provider-neutral nodes (no assets) or real icons from 17 providers; declaration-first nested clusters with responsive layout; direct, curved, and orthogonal connections with node-boundary ports; cold dashed topology kept separate from solid runtime motion; and one persistent message whose identity survives every hop. The kit shines for one clear story — and density is no longer your job: geometry is optional, so even a dense platform overview auto-fits and scales itself to stay in-frame (see It just fits, below).

Possible vs. actual

The one rule to internalise: a connection states what is possible; a moving message states what happened.

connect(toWorker1, queue, worker1, orthogonal, right, left);
connect(toWorker2, queue, worker2);
connect(toWorker3, queue, worker3, orthogonal, right, left);

message(job, queue, "101");
route(job, toWorker2, 0.9, linear);
route(job, worker2ToDatabase, 0.9, linear);

The three connections state what is possible. Only the two explicit route calls state what happened. Manic does not claim RabbitMQ selected Worker 2; the creator authored that selection.

The mental model

request is an HTTP-friendly alias of message. Provider services are data, not vocabulary: use "aws:lambda", not a separate Lambda constructor.

Provider names are visual metadata only. Manic does not infer balancing, queueing, broadcasting, retries, or any other behavior from an icon or label. Use explicit route/travel for one authored journey, seq for authored order, and par plus multiple objects when several journeys should happen together. hotpath is only an optional seeded walk over declared graph geometry; it is not a simulation of the services shown.

It just fits — no coordinates

Geometry is optional. Write architecture(id) with no center or size and the diagram fills the canvas (leaving the title and caption bands clear), centres itself, and lays out every cluster and node for you:

architecture(platform);   // that's the whole canvas declaration

Then add as much as the story needs. Leaf clusters with many children wrap into a grid, top-level tiers wrap into rows, and when the packed content would still overflow the frame, the whole diagram scales down as one — cards, icons, labels, and every connection lane together — to a legible minimum. Nothing clips off-canvas, and you never touch a coordinate, split a cluster into columns, or shrink a font to make it fit.

This example declares Route 53, an edge load balancer, a gateway, three availability zones of services, a replicated database cluster, and monitoring — all with zero geometry. Add a tier or a zone and it simply re-fits:

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);

Pass explicit (center, width, height) only when you deliberately want a hand-placed diagram; it is never required to make one fit.

Flowcharts — a diagram that runs

An architecture lays out regions and clusters; a flowchart ranks its nodes by the edges between them (like Mermaid’s graph TD/LR) and — this is manic’s edge — it runs: a token walks the process and takes a branch. Just declare flowchart(id): like an architecture it auto-fits and needs no coordinates. It lays the flow top-down and, when the flow is long, wraps it into side-by-side columns — the count chosen to fill the frame — so every node stays full-size and readable: you read down one column, then across to the top of the next, like a multi-column diagram on paper. Forward edges are clean elbows; a long feedback loop routes neatly around the bottom-left perimeter instead of cutting across the middle. Pass flowchart(id, LR) to force a single left-to-right row instead.

A flowchart is only useful if you can read its nodes, so there is a readability limit — 26 nodes top-down, 14 left-right — and past it (more than even column wrapping keeps legible) the editor warns you to split the process into linked sub-flows: end one chart with a connector node that hands off to the next. Raise the limit with a third argument, flowchart(id, dir, N), when you deliberately want a denser chart.

Every node is the same node(id, parent, "kind", "label") you already know — only now the kind is a shape: terminator (a start/end pill), process (a step rectangle), decision (a diamond), io (a parallelogram), subprocess, or connector (a small circle). The shape is the node’s body, with the label centred inside — nothing new to learn beyond the shape names.

Connect the nodes; inside a flowchart the edges default to clean orthogonal elbow connectors along the rank direction. Give a decision’s branches captions with annotate(edge, "yes"), colour them by meaning, and route a token from the start terminator to watch the algorithm execute. A loop is just an edge back to an earlier node (give it explicit ports so it routes up the side):

title("A Flowchart That Runs — the Factorial Loop");
canvas("16:9");
template("paper");

let u = (w+h-abs(w-h))/1440;
watermark(mark, (w*0.15, h*0.04), "Made With Manic");
text(kicker, (cx, h*0.06), "DIAGRAMS · FLOWCHART · AUTO-LAID");
text(headline, (cx, h*0.12), "A flowchart that runs");
size(kicker, 15*u); color(kicker, dim); bold(kicker);
size(headline, 26*u); bold(headline); wrap(headline, w*0.86);

// `flowchart(fc)` ranks nodes by their connections, auto-fits, and auto-orients:
// a shallow flow like this stays top-down on its own. No coordinates, no direction
// to choose. Node shapes are string kinds.
flowchart(fc);
node(start, fc, "terminator", "start");
node(rd, fc, "io", "read n");
node(init, fc, "process", "f=1  i=1");
node(dec, fc, "decision", "i <= n?");
node(body, fc, "process", "f=f*i  i=i+1");
node(out, fc, "io", "print f");
node(fin, fc, "terminator", "end");

connect(e1, start, rd);
connect(e2, rd, init);
connect(e3, init, dec);
connect(e4, dec, body);                          // keep looping
connect(e5, dec, out);                           // exit
connect(e6, body, dec, orthogonal, right, right); // loop back up the side
connect(e7, out, fin);

color(e4, cyan); color(e4.hot, cyan);
color(e5, lime); color(e5.hot, lime);
color(e6, gold); color(e6.hot, gold);
annotate(e4, "yes"); annotate(e5, "no"); annotate(e6, "loop");

// A colour key stands in for narration — the diagram explains itself.
text(k1, (w*0.34, h*0.93), "— continue"); size(k1, 14*u); color(k1, cyan); bold(k1);
text(k2, (w*0.50, h*0.93), "— exit");     size(k2, 14*u); color(k2, lime); bold(k2);
text(k3, (w*0.66, h*0.93), "— loop back"); size(k3, 14*u); color(k3, gold); bold(k3);

request(tok, start, "n = 3");
hidden(fc.nodes);
hidden(tok.parts);

step("shape") {
  stagger(0.07) {
    show(start, 0.3); show(rd, 0.3); show(init, 0.3); show(dec, 0.3);
    show(body, 0.3); show(out, 0.3); show(fin, 0.3);
  }
}
wait(0.2);

step("run") {
  seq {
    show(tok.parts, 0.2);
    route(tok, e1, 0.4, smooth); route(tok, e2, 0.4, smooth); route(tok, e3, 0.4, smooth);
    route(tok, e4, 0.4, smooth); route(tok, e6, 0.5, smooth);
    route(tok, e4, 0.4, smooth); route(tok, e6, 0.5, smooth);
    route(tok, e4, 0.4, smooth); route(tok, e6, 0.5, smooth);
    route(tok, e5, 0.4, smooth); route(tok, e7, 0.4, smooth);
  }
}
wait(0.3);

step("takeaway") {
  seq { pulse(fin, 0.7); pulse(fin, 0.7); }
}
wait(1.0);

Start without a cloud provider

The foundation includes native visual archetypes for client, service, gateway, database, cache, queue, storage, and external. These names select a compact visual only; they still imply no runtime behavior:

architecture(platform, (cx,cy), w*0.88, h*0.58);
node(user, platform, "client", "User");
node(edge, platform, "gateway", "Gateway");
node(api, platform, "service", "API Service");
node(db, platform, "database", "Database");

Use provider names only when recognizable artwork helps the lesson. A generic diagram remains fully portable and needs no image assets.

The complete foundation story sends one request forward and returns the same identity over separately directed paths:

title("Systems Foundation — One Request, One Return");
canvas("16:9");
template("mono");

watermark(mark, (160, 54), "Made With Manic");
text(kicker, (cx, 54), "PROVIDER-NEUTRAL SYSTEMS");
text(headline, (cx, 104), "Structure is not behaviour");
text(caption, (cx, h-58), "Cold paths show what is possible. One persistent dot shows what actually happened.");
size(kicker, 18); color(kicker, dim); bold(kicker);
size(headline, 34); bold(headline);
size(caption, 20); color(caption, dim); wrap(caption, w*0.86);

architecture(platform, (cx, cy+15), w*0.88, h*0.58);
node(user, platform, "client", "User");
node(edge, platform, "gateway", "Gateway");
node(api, platform, "service", "API Service");
node(cache, platform, "cache", "Cache");
node(db, platform, "database", "Database");

connect(toEdge, user, edge);
connect(toApi, edge, api);
connect(toCache, api, cache);
// One semantic connection: Manic chooses node-boundary ports and keeps the
// packet continuous across every internal orthogonal segment.
connect(toDb, cache, db, orthogonal, right, top);
connect(dbReturn, db, api, 95);
connect(apiReturn, api, edge, 75);
connect(edgeReturn, edge, user, 55);

message(packet, user, "GET");
hidden(kicker); hidden(headline); hidden(caption);
untraced(platform.connections);
hidden(packet);

step("structure") {
  par {
    show(kicker, 0.35);
    show(headline, 0.45);
    show(caption, 0.45);
    draw(platform.connections, 1.20, smooth);
  }
}
wait(0.45);

step("continuous-round-trip") {
  par {
    show(packet, 0.20);
    say(caption, "One dot moves continuously end to end. Every route hand-off preserves its identity.", 0.35);
    seq {
      route(packet, toEdge, 0.70, linear);
      route(packet, toApi, 0.70, linear);
      route(packet, toCache, 0.70, linear);
      route(packet, toDb, 0.70, linear);
      par {
        recolor(packet, magenta, 0.30);
        route(packet, dbReturn, 0.80, linear);
      }
      route(packet, apiReturn, 0.75, linear);
      route(packet, edgeReturn, 0.75, linear);
    }
  }
}
wait(0.45);

step("proof") {
  par {
    pulse(packet, 0.70);
    say(caption, "The same dot is back at the User: one identity, seven connected journeys, zero animation gaps.", 0.40);
  }
}
wait(1.10);

Declare the parent first

A node’s second argument is its parent architecture or cluster. Clusters may themselves belong to an earlier cluster, giving hierarchy without member lists or special block syntax:

architecture(events, (cx,cy), w*0.9, h*0.7);

node(source, events, "aws:eks", "K8s Source");
cluster(flows, events, "EVENT FLOWS");

cluster(workers, flows, "EVENT WORKERS");
node(worker1, workers, "aws:ecs", "Worker 1");
node(worker2, workers, "aws:ecs", "Worker 2");
node(worker3, workers, "aws:ecs", "Worker 3");

node(queue, flows, "aws:sqs", "Event Queue");

cluster(processing, flows, "PROCESSING");
node(proc1, processing, "aws:lambda", "Processor 1");
node(proc2, processing, "aws:lambda", "Processor 2");
node(proc3, processing, "aws:lambda", "Processor 3");

node(store, events, "aws:s3", "Events Store");
node(analytics, events, "aws:redshift", "Analytics");

Landscape uses a horizontal system flow and stacks replicated members inside their clusters. Portrait rotates the main flow and places replicated members across the available width. Cluster frames resize from their descendants.

Cold topology, then hot behaviour

connect(toWorkers, source, workers);
connect(toQueue, workers, queue);
connect(toProcessors, queue, processing);
connect(toStore, processing, store);

message(event, source, "EVENT");

step("process") {
  seq {
    route(event, toWorkers, 0.8, smooth);
    route(event, toQueue, 0.8, smooth);
    route(event, toProcessors, 0.8, smooth);
  }
}

Connecting a node to a cluster creates the possible lane to every member. Connections are dashed by default: they explain a relationship without falsely claiming that data is flowing. The hot overlay stays solid when activity begins.

The declared connection name addresses the complete fan-out or fan-in group, so draw(toWorkers) and flow(toWorkers, ...) affect every physical lane. route still selects only the lane beginning at the message’s current node.

route is the explicit form. It chooses the physical lane that begins at the message’s current node, illuminates that lane, moves the same message identity, and records its semantic destination. A later route that does not start there fails during manic check instead of teleporting.

Use draw(toWorkers) to reveal every possible lane. Use route for one real message. Use flow(toWorkers, ...) only when the idea is aggregate activity across the worker pool.

Route around a visual obstacle

Connections remain direct unless the creator supplies a signed bend in canvas units:

connect(toDatabase, services, database);
connect(toCache, services, cache, 145*u);

The optional fourth argument changes only the drawn curve and the route that travels over it. Positive and negative values curve on opposite sides. It does not infer obstacles, architecture semantics, or provider behavior; use the smallest bend that keeps the diagram readable on every target canvas.

Use one orthogonal connector

For architecture diagrams that need right-angle routing, keep the connection as one semantic identity:

connect(toDatabase, cache, database, orthogonal);
connect(returnPath, database, api, orthogonal, bottom, right);

message(packet, cache, "GET");
route(packet, toDatabase, 0.9, linear);

orthogonal uses automatic node-boundary ports by default. Add explicit source and destination ports only when the composition needs them: left, right, top, or bottom. The engine builds the internal elbows, but draw, flow, route, and hotpath still address the declared connection id. One message moves across every segment without replacement objects or animation gaps.

This is deterministic Manhattan geometry, not obstacle avoidance. Manic does not inspect service kinds or guess what the connection means.

The connection & arrow grammar

systems-arrow-patterns.manic is the visual reference for every way one connection can be drawn. All six share one rule: the connection describes a possible relationship; direction and meaning come from the moving object (route/flow) and from creator-chosen colour, never from the arrowhead alone.

Colour the lanes by relationship so a dense diagram reads at a glance — each connection exposes the cold line id and the hot overlay id.hot:

color(fwd, cyan);   color(fwd.hot, cyan);      // request
hue(ret, 328);      hue(ret.hot, 328);         // response (pink)

Nothing here implies balancing, buffering, or broadcast. A fan-out is possible lanes; the message that moves — and the colour you give each lane — is what tells the runtime story.

Translate a Mingrammer diagram

The structural mapping is deliberately small:

This keeps the imported design faithful without turning labels such as “lb,” “queue,” or “topic” into hidden behavior. The creator decides which object moves, which path it takes, and whether several motions use seq or par.

The clustered web-services example recreates Route 53, ELB, three ECS services, an RDS primary/read-only pair, and ElastiCache. It then distinguishes all cold relationships from one database round trip, one cache round trip, and a separately authored database-link pulse. Return journeys use separately directed connections and recolour the same persistent identity rather than playing the incoming path backward. The example gives responses a second visual grammar—curved pink dashed arrows, a heavier glow, and a matching response identity—while requests remain clean solid strokes:

title("Clustered Web Services on AWS");
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), "AWS 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, "aws:route53", "dns");
node(lb, clusteredWeb, "aws:elb", "lb");

cluster(services, clusteredWeb, "SERVICES");
node(web1, services, "aws:ecs", "web1");
node(web2, services, "aws:ecs", "web2");
node(web3, services, "aws:ecs", "web3");

cluster(database, clusteredWeb, "DB CLUSTER");
node(dbPrimary, database, "aws:rds", "userdb");
node(dbReplica, database, "aws:rds", "userdb ro");

node(memcached, clusteredWeb, "aws:elasticache", "memcached");

connect(dnsToLb, dns, lb);
connect(lbToServices, lb, services);
connect(servicesToDb, services, dbPrimary);
connect(servicesToCache, services, memcached, 145*u);
connect(dbToServices, dbPrimary, services, 42*u);
connect(servicesToLb, services, lb, 42*u);
connect(cacheToWeb2, memcached, 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, "Route 53 and the load balancer 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 ECS 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(memcached, 0.40);
    say(caption, "The database cluster and cache 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. 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 → memcached, 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);

Infer one complete hot path

For the common architecture-explainer shot, Manic can follow the graph itself:

message(event, source, "EVENT");

step("runtime") {
  hotpath(event, 6.0, 27);
}

hotpath(message, [duration], [seed]) begins at the message’s current node, finds valid outgoing physical lanes, chooses one at every fan-out, and keeps the same dot moving until it reaches a sink. Only the selected lanes illuminate; all other relationships stay dashed and quiet.

The optional seed controls the branch choices. The result feels random to a viewer but is deterministic across previews, backend renders, and WASM. Change the seed to show another valid execution without rewriting the story. Use route when the exact service sequence is part of the lesson; use hotpath when the lesson is “one possible runtime through this topology.”

Directional and continuous flow

flow(path, 0.8);                         // forward, one clean pulse
flow(path, 4.0, forward, continuous);    // finite repeating stream
flow(returnPath, 1.0, reverse, once);    // reverse pulse on generic geometry
flow(syncPath, 4.0, both, continuous);   // independent duplex streams

The full signature is:

flow(path, [duration], [forward|reverse|both], [once|continuous])

Continuous flow chooses an integer number of length-aware cycles. It begins empty and ends on a cycle boundary, so seeking remains deterministic and the stream drains instead of freezing halfway along the connection. In a Systems story, prefer a separately directed return connection when the topology truly contains a response path.

Complete event-processing story

title("Event Processing on AWS — From Topology to Hot Path");
canvas("16:9");
template("mono");

let u = (w+h-abs(w-h))/1440;
watermark(mark, (w*0.15, h*0.055), "Made With Manic");
text(kicker, (cx, h*0.055), "AWS ARCHITECTURE · EVENT PROCESSING");
text(headline, (cx, h*0.115), "One topology. One event. One visible hot path.");
text(caption, (cx, h*0.935), "Dashed relationships show every route the architecture allows.");
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(eventProcessing, (cx, h*0.51), w*0.82, h*0.70);
}
else {
  architecture(eventProcessing, (cx, h*0.51), w*0.92, h*0.69);
}

node(source, eventProcessing, "aws:eks", "K8s Source");
cluster(flows, eventProcessing, "EVENT FLOWS");
cluster(workers, flows, "EVENT WORKERS");
node(worker1, workers, "aws:ecs", "Worker 1");
node(worker2, workers, "aws:ecs", "Worker 2");
node(worker3, workers, "aws:ecs", "Worker 3");
node(queue, flows, "aws:sqs", "Event Queue");
cluster(processing, flows, "PROCESSING");
node(proc1, processing, "aws:lambda", "Processor 1");
node(proc2, processing, "aws:lambda", "Processor 2");
node(proc3, processing, "aws:lambda", "Processor 3");
node(store, eventProcessing, "aws:s3", "Events Store");
node(warehouse, eventProcessing, "aws:redshift", "Analytics");

connect(toWorkers, source, workers);
connect(toQueue, workers, queue);
connect(toHandlers, queue, processing);
connect(toStore, processing, store);
connect(toAnalytics, processing, warehouse);

message(event, source, "EVENT");

hidden(eventProcessing.nodes);
hidden(flows.parts); hidden(workers.parts); hidden(processing.parts);
hidden(event.parts);
untraced(toWorkers); untraced(toQueue); untraced(toHandlers);
untraced(toStore); untraced(toAnalytics);

step("source") {
  par {
    show(source, 0.45);
    say(caption, "EKS is the source; the rest of the system is still only structure.", 0.40);
  }
}
wait(0.25);

step("ownership") {
  par {
    show(flows.parts, 0.50);
    show(workers.parts, 0.45);
    stagger(0.10) { show(worker1, 0.35); show(worker2, 0.35); show(worker3, 0.35); }
    show(queue, 0.40);
    show(processing.parts, 0.45);
    stagger(0.10) { show(proc1, 0.35); show(proc2, 0.35); show(proc3, 0.35); }
    show(store, 0.40); show(warehouse, 0.40);
    say(caption, "Nested boundaries reveal ownership without hiding the individual services.", 0.40);
  }
}
wait(0.20);

step("possible-topology") {
  par {
    draw(toWorkers, 0.55);
    draw(toQueue, 0.55);
    draw(toHandlers, 0.55);
    draw(toStore, 0.55); draw(toAnalytics, 0.55);
    say(caption, "Every dashed edge is a possible relationship—not a claim that data is flowing.", 0.40);
  }
}
wait(0.35);

step("runtime-hot-path") {
  par {
    show(event.parts, 0.25);
    hotpath(event, 6.20, 27);
    say(caption, "The event now chooses valid branches and travels end-to-end as one continuous hot path.", 0.40);
  }
}
wait(0.35);

step("takeaway") {
  par {
    pulse(event.parts, 0.70);
    say(caption, "Cold topology explains relationships. The moving dot proves what happened now.", 0.45);
  }
}
wait(1.40);

Run and audit it directly:

manic examples/aws-event-processing-clusters-poc.manic
manic check examples/aws-event-processing-clusters-poc.manic --canvas all

What the kit will not do for you

By design, the kit never infers behaviour from an icon or a label. It will not decide that a node is a load balancer, a queue, or a database, and it never simulates balancing, buffering, broadcast, retries, or failure. You author what happens with explicit route, flow, seq, par, colour, and ordinary verbs — that is what keeps the vocabulary small and the diagram honest.

Two practical tips:

• Draw the return path, don’t reverse the arrow. A response is its own connection with its own colour, not the request lane played backward.
• For very dense diagrams, shape the layout yourself. Group nodes into clusters and split wide rows into columns so nothing overflows the frame.

Diagrams — icon reference & aliases

Every diagram node takes a provider:name string that selects artwork only — it never implies routing, balancing, queueing, or persistence. The catalogue covers 17 providers / 2461 components, generated from assets/diagrams/ by scripts/gen-diagram-manifest.py (Mingrammer/Diagrams icon set, disk-loaded at render — no binary bloat).

Reference notation

• provider:name — e.g. node(x, arch, "aws:lambda", "fn"), "gcp:bigquery", "onprem:redis", "k8s:pod". First matching category wins for the bare name.
• provider:category/name — disambiguates when the same name lives in two categories of one provider, e.g. "aws:network/internet-gateway" vs "aws:general/internet-gateway".
• Native archetypes need no provider: client, service, gateway, database, cache, queue, storage, external (no cloud assets).

Friendly aliases

Short, human names resolve to the exact catalogue key — same artwork either way:

Everything else passes through unchanged: aws:lambda, gcp:*, azure:*, onprem:*, k8s:*, ibm:*, oci:*, … all resolve directly.

Colouring paths by relationship

A connect(id, …) exposes two colourable parts — the cold dashed line id and the hot overlay id.hot. Group connections by relationship and colour each group (color/hue/glow/dashed/stroke) so a dense diagram reads at a glance:

color(reqPath, cyan);   color(reqPath.hot, cyan);    // REQUEST
color(logPath, gold);   color(logPath.hot, gold);    // ANALYTICS
hue(scrape, 328);       hue(scrape.hot, 328);         // TELEMETRY (pink)

Providers & components

Any listed name works as provider:name. Full machine-readable catalogue: assets/diagrams-manifest.json.

alibabacloud — 92 components

alibabacloud:alibabacloud, alibabacloud:analytic-db, alibabacloud:anti-bot-service, alibabacloud:anti-ddos-basic, alibabacloud:anti-ddos-pro, alibabacloud:antifraud-service, alibabacloud:api-gateway, alibabacloud:apsaradb-cassandra, alibabacloud:apsaradb-hbase, alibabacloud:apsaradb-memcache, alibabacloud:apsaradb-mongodb, alibabacloud:apsaradb-oceanbase, alibabacloud:apsaradb-polardb, alibabacloud:apsaradb-postgresql … (+78 more)

aws — 513 components

aws:ad-connector, aws:alexa-for-business, aws:amazon-devops-guru, aws:amazon-managed-grafana, aws:amazon-managed-prometheus, aws:amazon-managed-workflows-apache-airflow, aws:amazon-opensearch-service, aws:amplify, aws:analytics, aws:apache-mxnet-on-aws, aws:api-gateway, aws:api-gateway-endpoint, aws:app-mesh, aws:app-runner … (+499 more)

azure — 690 components

azure:aad-licenses, azure:abs-member, azure:access-review, azure:active-directory, azure:active-directory-connect-health, azure:activity-log, azure:ad-b2c, azure:ad-domain-services, azure:ad-identity-protection, azure:ad-privileged-identity-management, azure:administrative-units, azure:advisor, azure:ai-studio, azure:aks-istio … (+676 more)

digitalocean — 26 components

digitalocean:certificate, digitalocean:containers, digitalocean:dbaas-primary, digitalocean:dbaas-primary-standby-more, digitalocean:dbaas-read-only, digitalocean:dbaas-standby, digitalocean:digitalocean, digitalocean:docker, digitalocean:domain, digitalocean:domain-registration, digitalocean:droplet, digitalocean:droplet-connect, digitalocean:droplet-snapshot, digitalocean:firewall … (+12 more)

elastic — 42 components

elastic:agent, elastic:alerting, elastic:apm, elastic:app-search, elastic:auditbeat, elastic:beats, elastic:cloud, elastic:crawler, elastic:ece, elastic:eck, elastic:elastic, elastic:elasticsearch, elastic:endpoint, elastic:enterprise-search … (+28 more)

firebase — 22 components

firebase:ab-testing, firebase:app-distribution, firebase:app-indexing, firebase:authentication, firebase:crash-reporting, firebase:crashlytics, firebase:dynamic-links, firebase:extensions, firebase:firebase, firebase:firestore, firebase:functions, firebase:hosting, firebase:in-app-messaging, firebase:invites … (+8 more)

gcp — 123 components

gcp:access-context-manager, gcp:advanced-solutions-lab, gcp:ai-hub, gcp:ai-platform, gcp:ai-platform-data-labeling-service, gcp:api-gateway, gcp:apigee, gcp:app-engine, gcp:armor, gcp:assured-workloads, gcp:automl, gcp:automl-natural-language, gcp:automl-tables, gcp:automl-translation … (+109 more)

generic — 27 components

generic:android, generic:blank, generic:centos, generic:datacenter, generic:debian, generic:firewall, generic:generic, generic:ios, generic:linux-general, generic:mobile, generic:qemu, generic:rack, generic:raspbian, generic:red-hat … (+13 more)

gis — 65 components

gis:actinia, gis:addok, gis:ban, gis:baremaps, gis:cesium, gis:deegree, gis:g3w-suite, gis:gdal, gis:geohealthcheck, gis:geomapfish, gis:geomesa, gis:geonetwork, gis:geonode, gis:geopackage … (+51 more)

ibm — 164 components

ibm:actionable-insight, ibm:alert-notification, ibm:analytics, ibm:annotate, ibm:api-developer-portal, ibm:api-management, ibm:api-polyglot-runtimes, ibm:api-security, ibm:app-server, ibm:application-logic, ibm:artifact-management, ibm:bare-metal-server, ibm:block-storage, ibm:blockchain … (+150 more)

k8s — 46 components

k8s:api, k8s:c-c-m, k8s:c-m, k8s:c-role, k8s:chaos-mesh, k8s:cm, k8s:crb, k8s:crd, k8s:cronjob, k8s:deploy, k8s:ds, k8s:ep, k8s:etcd, k8s:external-dns … (+32 more)

oci — 141 components

oci:alarm, oci:alarm-white, oci:api-gateway, oci:api-gateway-white, oci:api-service, oci:api-service-white, oci:audit, oci:audit-white, oci:autonomous, oci:autonomous-white, oci:autoscale, oci:autoscale-white, oci:backbone, oci:backbone-white … (+127 more)

onprem — 172 components

onprem:activemq, onprem:aerospike, onprem:airflow, onprem:ambassador, onprem:ansible, onprem:apache, onprem:argocd, onprem:atlantis, onprem:awx, onprem:beam, onprem:bind-9, onprem:bitwarden, onprem:boundary, onprem:buzzfeed-sso … (+158 more)

openstack — 51 components

openstack:ansible, openstack:barbican, openstack:blazar, openstack:charms, openstack:chef, openstack:cinder, openstack:cloudkitty, openstack:congress, openstack:cyborg, openstack:designate, openstack:ec2api, openstack:freezer, openstack:glance, openstack:heat … (+37 more)

outscale — 13 components

outscale:client-vpn, outscale:compute, outscale:direct-connect, outscale:firewall, outscale:identity-and-access-management, outscale:internet-service, outscale:load-balancer, outscale:nat-service, outscale:net, outscale:outscale, outscale:simple-storage-service, outscale:site-to-site-vpng, outscale:storage

programming — 74 components

programming:action, programming:angular, programming:backbone, programming:bash, programming:c, programming:camel, programming:collate, programming:cpp, programming:csharp, programming:dapr, programming:dart, programming:database, programming:decision, programming:delay … (+60 more)

saas — 40 components

saas:adyen, saas:akamai, saas:amazon-pay, saas:auth0, saas:cloudflare, saas:cloudinary, saas:crowdstrike, saas:datadog, saas:dataform, saas:discord, saas:facebook, saas:fastly, saas:imperva, saas:intercom … (+26 more)

Bundled assets — portable files without path guessing

Manic scenes can use small, documented production assets through a stable asset: URI. The URI works from the desktop CLI, a different working directory, the Docker image, or the production backend. No render flag is needed.

image(mark, (cx, 260), "asset:manic-logo.png", 180, 180);
model3(beacon, "asset:models/manic-pyramid.obj", (0,0,0), 1);
assembly3(console, "asset:models/manic-console.obj", (3,0,0), 1);
svg(logo, (cx, 480), "asset:svg/heart.svg", 320);

The same image URI can be used in a Creator profile:

creator(me, "@anish2good name=Manic logo=asset:manic-logo.png footer=signature");
socials(me);

Available public assets

The SVG sets are a curated, permissively-licensed starter pack (see assets/svg/LICENSES.md). List what’s bundled — and what a file imports as — with manic svgcheck assets/svg.

The catalog stays deliberately small. Do not invent an asset name that is not listed here. Manic reports a clear error if a bundled URI is missing, and it rejects .. traversal. OBJ files also retain the normal file-size and geometry safety limits.

Vector import — SVG as native geometry

svg() brings vector artwork in as native path entities — not a texture. Each subpath of the SVG becomes a real Polyline/Polygon you can draw, morph, recolour, and animate exactly like a shape you authored by hand. It’s the 2D twin of model3’s OBJ import.

svg(logo, (cx, cy), "asset:svg/heart.svg", 320);

Reposition — the second argument is the centre. Move it, or animate it; every piece follows because the whole drawing shares one tag:

svg(pin, (cx, cy), "asset:svg/pin.svg", 200);   // centred at (cx, cy)
move(pin, (cx, cy - 200), 1.0);                  // glide the whole drawing up

Resize — the last argument is the width in pixels; the height follows the artwork’s own aspect ratio:

svg(small, (300, cy), "asset:svg/robot.svg", 120);   // 120 px wide
svg(big,   (800, cy), "asset:svg/robot.svg", 360);   // same file, 3× bigger — still crisp

Recolour — imported fills reproduce faithfully (they are not re-themed by the template, even if a colour happens to match a palette name). Change them whenever you like:

recolor(logo, cyan);            // whole drawing → cyan
hue(logo, 200, 0.9, 0.6);       // …or by HSL
gradient(logo, gold, magenta);  // …or a gradient across it

Animate — one verb drives the whole drawing (it is tagged with the id):

hidden(logo); show(logo, 0.8);  // reveal
pulse(logo, 0.9);               // emphasise

Address one piece — subpaths are named {id}.p0, {id}.p1, … in document order, so you can single one out:

recolor(pin.p1, gold);   // just the pin's inner hole

Layering — imported art defaults to z = 0. Raise it above another layer (a grid, a backdrop) with z:

z(logo, 6);

What v1 imports (and what it skips)

Imported: paths plus the basic shapes (rect, circle, ellipse, line, polygon, polyline) with their transforms resolved, and solid fill/stroke colours. Curves are flattened to smooth polylines.

Imported gradients: linear and radial fill gradients come in faithfully (mapped onto Manic’s gradient(), multi-stop ramps resampled) — so gradient icons, illustrations, and emblems keep their shading.

Skipped for now: SVG <text> and embedded <image>, clipPath/mask, filters and blurs, pattern paint, and gradient strokes (fills are supported). Keep artwork reasonably simple — there’s a point-budget guard and the usual file-size limit.

Two things worth knowing:

• currentColor — most icon sets (Lucide, Heroicons, …) paint with currentColor, a host-themed placeholder. Manic imports those as themeable geometry: they take the entity’s own colour, so recolor(icon, cyan) just works. Artwork with real colours (flags, illustrations) keeps them faithfully.
• Concave fills are triangulated (ear-clipping), so stars, notched glyphs, and blobs fill correctly — not just convex shapes.

Screen a set before you rely on it

Downloaded a folder of SVGs? Vet them against the importer first:

$ manic svgcheck assets/svg/lucide
  ✓ rocket.svg — 4 paths, 199 pts, themeable (0 with fill/stroke)
  ✓ map-pin.svg — 2 paths, 147 pts, themeable (0 with fill/stroke)
  …

Each file reports its subpath/point count and whether it’s themeable (recolour it) or coloured (keeps its own colours); anything empty, over-budget, or unparseable is flagged with ✗. scripts/fetch-svg-assets.sh vendors the bundled sets the same way.

Your own images and models

Ordinary paths still work:

image(photo, (cx,cy), "uploads/my-photo.jpg", 720, 480);
model3(product, "uploads/my-product.obj", (0,0,0), 1);
svg(logo, (cx,cy), "uploads/my-logo.svg", 300);

Bring in any SVG this way — an icon you downloaded, a logo, a map outline. The caller must make those files available to the renderer. This is the right choice for uploads and private brand assets; asset: is for the small catalog that ships with Manic.

Adding a new bundled asset to Manic

1. Put it under assets/ in a typed folder such as models/, with a lowercase, descriptive filename.
2. Add its stable URI to this page and assets/README.md.
3. Add or update a checked .manic example using the URI.
4. Keep models geometry-only; do not add scripts, arbitrary shaders, or remote dependencies.
5. Run the tests and mdBook build.

The release machinery copies the entire directory. Docker installs it at /usr/local/share/manic/assets; Linux builds produce dist/manic-assets.tar.gz; the EC2 deploy installs that archive; and the playground sync mirrors the same catalog. Future entries therefore need no per-file pipeline edit. A custom deployment may point MANIC_ASSETS_DIR at a different catalog root.

SVG assets — reference & aliases

Every svg() import takes an asset:svg/<set>/<name>.svg URI (or your own file path). The bundled catalogue covers 6,404 shapes across four sets, vendored by scripts/fetch-svg-assets.sh and screened with manic svgcheck assets/svg. Licences: assets/svg/LICENSES.md.

Reference notation

svg(logo, (cx, cy), "asset:svg/lucide/rocket.svg", 300);   // an icon
svg(fin,  (cx, cy), "asset:svg/flags/in.svg",       220);   // a flag (ISO code)
svg(joy,  (cx, cy), "asset:svg/emoji/fire.svg",     140);   // an emoji (alias)
svg(joy,  (cx, cy), "asset:svg/emoji/1f525.svg",    140);   // …same, by codepoint

Themeable vs faithful. Lucide/Heroicons paint with currentColor, so they take the entity’s colour — recolor(icon, cyan) just works. Flags and emoji keep their real colours. Concave shapes (stars, emblems) fill correctly, and stroke-drawn designs (stripes, Nordic crosses) import as filled bands.

Known limitation. A few flags place their stars with SVG <use> instancing (e.g. cn — China) or <marker>; those instanced glyphs render incorrectly for now (tracked). The flag’s plain fields still show, and all icons/emoji and most flags render cleanly. svgcheck a set before you rely on it.

Emoji friendly aliases

Twemoji files are named by Unicode codepoint; these short names resolve to the same file — either works:

Any other emoji works by codepoint — e.g. asset:svg/emoji/1f680.svg (🚀). Add your own aliases in scripts/fetch-svg-assets.sh.

Discovering the full catalogue

Browse every bundled asset: the SVG asset catalogue lists all 6,400+ files by set — searchable with ⌘/Ctrl-F, no CLI needed. That page is generated from the assets themselves by scripts/gen-svg-index.py, so it always matches what ships.

If you have the CLI, svgcheck also screens a folder — and shows what each file imports as (paths, points, themeable vs coloured):

$ manic svgcheck assets/svg/lucide
  ✓ rocket.svg — 4 paths, 199 pts, themeable
  ✓ map-pin.svg — 2 paths, 147 pts, themeable
  …
$ manic svgcheck assets/svg/flags        # every country flag
$ manic svgcheck assets/svg/emoji        # every Twemoji

scripts/fetch-svg-assets.sh re-vendors or updates every set from its upstream repo (Lucide · Heroicons · flag-icons · Twemoji). Bring your own: svg(id, pos, "path/to/any.svg") imports any SVG file — vet it with svgcheck first. See the import how-to for positioning, resizing, recolouring, and animating.

SVG asset catalogue

Every one of the 6,408 bundled SVG vectors, by set — so you can find an asset without the CLI. Drop any of them in with:

svg(id, (x, y), "asset:svg/<set>/<name>.svg", size);

Names are searchable — use your browser’s find (⌘/Ctrl-F). Licences are per set; see assets/svg/LICENSES.md for full attribution. For a quick start with plain-English emoji names, see the friendly aliases.

Lucide — clean outline icons · 1,756 · ISC

asset:svg/lucide/<name>.svg

a-arrow-down · a-arrow-up · a-large-small · accessibility · activity · ad · air-vent · airplay · alarm-clock · alarm-clock-check · alarm-clock-minus · alarm-clock-off · alarm-clock-plus · alarm-smoke · album · align-center-horizontal · align-center-vertical · align-end-horizontal · align-end-vertical · align-horizontal-distribute-center · align-horizontal-distribute-end · align-horizontal-distribute-start · align-horizontal-justify-center · align-horizontal-justify-end · align-horizontal-justify-start · align-horizontal-space-around · align-horizontal-space-between · align-start-horizontal · align-start-vertical · align-vertical-distribute-center · align-vertical-distribute-end · align-vertical-distribute-start · align-vertical-justify-center · align-vertical-justify-end · align-vertical-justify-start · align-vertical-space-around · align-vertical-space-between · ambulance · ampersand · ampersands · amphora · anchor · angry · annoyed · antenna · anvil · aperture · app-window · app-window-mac · apple · archive · archive-restore · archive-x · armchair · arrow-big-down · arrow-big-down-dash · arrow-big-left · arrow-big-left-dash · arrow-big-right · arrow-big-right-dash · arrow-big-up · arrow-big-up-dash · arrow-down · arrow-down-0-1 · arrow-down-1-0 · arrow-down-a-z · arrow-down-from-line · arrow-down-left · arrow-down-narrow-wide · arrow-down-right · arrow-down-to-dot · arrow-down-to-line · arrow-down-up · arrow-down-wide-narrow · arrow-down-z-a · arrow-left · arrow-left-from-line · arrow-left-right · arrow-left-to-line · arrow-right · arrow-right-from-line · arrow-right-left · arrow-right-to-line · arrow-up · arrow-up-0-1 · arrow-up-1-0 · arrow-up-a-z · arrow-up-down · arrow-up-from-dot · arrow-up-from-line · arrow-up-left · arrow-up-narrow-wide · arrow-up-right · arrow-up-to-line · arrow-up-wide-narrow · arrow-up-z-a · arrows-up-from-line · asterisk · astroid · at-sign · atom · audio-lines · audio-waveform · award · axe · axis-3d · baby · backpack · badge · badge-alert · badge-cent · badge-check · badge-dollar-sign · badge-euro · badge-indian-rupee · badge-info · badge-japanese-yen · badge-minus · badge-percent · badge-plus · badge-pound-sterling · badge-question-mark · badge-russian-ruble · badge-swiss-franc · badge-turkish-lira · badge-x · baggage-claim · balloon · ban · banana · bandage · banknote · banknote-arrow-down · banknote-arrow-up · banknote-check · banknote-x · barcode · barrel · baseline · bath · battery · battery-charging · battery-full · battery-low · battery-medium · battery-plus · battery-warning · beaker · bean · bean-off · bed · bed-double · bed-single · beef · beef-off · beer · beer-off · bell · bell-check · bell-dot · bell-electric · bell-minus · bell-off · bell-plus · bell-ring · between-horizontal-end · between-horizontal-start · between-vertical-end · between-vertical-start · biceps-flexed · bike · binary · binoculars · biohazard · bird · birdhouse · bitcoin · blend · blender · blinds · blocks · bluetooth · bluetooth-connected · bluetooth-off · bluetooth-searching · bold · bolt · bomb · bone · bone-fracture · book · book-a · book-alert · book-audio · book-check · book-copy · book-dashed · book-down · book-headphones · book-heart · book-image · book-key · book-lock · book-marked · book-minus · book-open · book-open-check · book-open-text · book-plus · book-search · book-text · book-type · book-up · book-up-2 · book-user · book-x · bookmark · bookmark-check · bookmark-minus · bookmark-off · bookmark-plus · bookmark-x · boom-box · bot · bot-message-square · bot-off · bottle-wine · bow-arrow · box · boxes · braces · brackets · brain · brain-circuit · brain-cog · brick-wall · brick-wall-fire · brick-wall-shield · briefcase · briefcase-business · briefcase-conveyor-belt · briefcase-medical · bring-to-front · broccoli · brush · brush-cleaning · bubbles · bug · bug-off · bug-play · building · building-2 · bus · bus-front · cable · cable-car · cake · cake-slice · calculator · calendar · calendar-1 · calendar-arrow-down · calendar-arrow-up · calendar-check · calendar-check-2 · calendar-clock · calendar-cog · calendar-days · calendar-fold · calendar-heart · calendar-minus · calendar-minus-2 · calendar-off · calendar-plus · calendar-plus-2 · calendar-range · calendar-search · calendar-sync · calendar-x · calendar-x-2 · calendars · camera · camera-off · candy · candy-cane · candy-off · cannabis · cannabis-off · captions · captions-off · car · car-front · car-taxi-front · caravan · card-sim · carrot · case-lower · case-sensitive · case-upper · cassette-tape · cast · castle · cat · cctv · cctv-off · chart-area · chart-bar · chart-bar-big · chart-bar-decreasing · chart-bar-increasing · chart-bar-stacked · chart-candlestick · chart-column · chart-column-big · chart-column-decreasing · chart-column-increasing · chart-column-stacked · chart-gantt · chart-line · chart-network · chart-no-axes-column · chart-no-axes-column-decreasing · chart-no-axes-column-increasing · chart-no-axes-combined · chart-no-axes-gantt · chart-pie · chart-scatter · chart-spline · check · check-check · check-line · chef-hat · cherry · chess-bishop · chess-king · chess-knight · chess-pawn · chess-queen · chess-rook · chevron-down · chevron-first · chevron-last · chevron-left · chevron-right · chevron-up · chevrons-down · chevrons-down-up · chevrons-left · chevrons-left-right · chevrons-left-right-ellipsis · chevrons-right · chevrons-right-left · chevrons-up · chevrons-up-down · church · cigarette · cigarette-off · circle · circle-alert · circle-arrow-down · circle-arrow-left · circle-arrow-out-down-left · circle-arrow-out-down-right · circle-arrow-out-up-left · circle-arrow-out-up-right · circle-arrow-right · circle-arrow-up · circle-check · circle-check-big · circle-chevron-down · circle-chevron-left · circle-chevron-right · circle-chevron-up · circle-dashed · circle-divide · circle-dollar-sign · circle-dot · circle-dot-dashed · circle-ellipsis · circle-equal · circle-euro · circle-fading-arrow-up · circle-fading-plus · circle-gauge · circle-minus · circle-off · circle-parking · circle-parking-off · circle-pause · circle-percent · circle-pile · circle-play · circle-plus · circle-pound-sterling · circle-power · circle-question-mark · circle-slash · circle-slash-2 · circle-small · circle-star · circle-stop · circle-user · circle-user-round · circle-x · circuit-board · citrus · clapperboard · clipboard · clipboard-check · clipboard-clock · clipboard-copy · clipboard-list · clipboard-minus · clipboard-paste · clipboard-pen · clipboard-pen-line · clipboard-plus · clipboard-type · clipboard-x · clock · clock-1 · clock-10 · clock-11 · clock-12 · clock-2 · clock-3 · clock-4 · clock-5 · clock-6 · clock-7 · clock-8 · clock-9 · clock-alert · clock-arrow-down · clock-arrow-left · clock-arrow-right · clock-arrow-up · clock-check · clock-fading · clock-plus · closed-caption · cloud · cloud-alert · cloud-backup · cloud-check · cloud-cog · cloud-download · cloud-drizzle · cloud-fog · cloud-hail · cloud-lightning · cloud-moon · cloud-moon-rain · cloud-off · cloud-rain · cloud-rain-wind · cloud-snow · cloud-sun · cloud-sun-rain · cloud-sync · cloud-upload · cloudy · clover · club · code · code-xml · coffee · cog · coins · columns-2 · columns-3 · columns-3-cog · columns-4 · combine · command · compass · component · computer · concierge-bell · cone · construction · contact · contact-round · container · contrast · cookie · cooking-pot · copy · copy-check · copy-minus · copy-plus · copy-slash · copy-x · copyleft · copyright · corner-down-left · corner-down-right · corner-left-down · corner-left-up · corner-right-down · corner-right-up · corner-up-left · corner-up-right · cpu · creative-commons · credit-card · croissant · crop · cross · crosshair · crown · cuboid · cup-soda · currency · cylinder · dam · database · database-arrow-down · database-arrow-up · database-backup · database-check · database-minus · database-plus · database-search · database-x · database-zap · decimals-arrow-left · decimals-arrow-right · delete · dessert · diameter · diamond · diamond-minus · diamond-percent · diamond-plus · dice-1 · dice-2 · dice-3 · dice-4 · dice-5 · dice-6 · dices · diff · disc · disc-2 · disc-3 · disc-album · divide · dna · dna-off · dock · dog · dollar-sign · donut · door-closed · door-closed-locked · door-open · dot · download · drafting-compass · drama · drill · drone · droplet · droplet-off · droplets · drum · drumstick · dumbbell · ear · ear-off · earth · earth-lock · eclipse · egg · egg-fried · egg-off · ellipse · ellipsis · ellipsis-vertical · equal · equal-approximately · equal-not · eraser · ethernet-port · euro · ev-charger · expand · external-link · eye · eye-closed · eye-dashed · eye-off · factory · fan · fast-forward · feather · fence · ferris-wheel · file · file-archive · file-axis-3d · file-badge · file-box · file-braces · file-braces-corner · file-chart-column · file-chart-column-increasing · file-chart-line · file-chart-pie · file-check · file-check-corner · file-clock · file-code · file-code-corner · file-cog · file-diff · file-digit · file-down · file-exclamation-point · file-headphone · file-heart · file-image · file-input · file-key · file-lock · file-minus · file-minus-corner · file-music · file-output · file-pen · file-pen-line · file-play · file-plus · file-plus-corner · file-question-mark · file-scan · file-search · file-search-corner · file-signal · file-sliders · file-spreadsheet · file-stack · file-symlink · file-terminal · file-text · file-type · file-type-corner · file-up · file-user · file-video-camera · file-volume · file-x · file-x-corner · files · film · fingerprint-pattern · fire-extinguisher · fish · fish-off · fish-symbol · fishing-hook · fishing-rod · flag · flag-off · flag-triangle-left · flag-triangle-right · flame · flame-kindling · flashlight · flashlight-off · flask-conical · flask-conical-off · flask-round · flip-horizontal-2 · flip-vertical-2 · flower · flower-2 · focus · fold-horizontal · fold-vertical · folder · folder-archive · folder-bookmark · folder-check · folder-clock · folder-closed · folder-code · folder-cog · folder-dot · folder-down · folder-git · folder-git-2 · folder-heart · folder-input · folder-kanban · folder-key · folder-lock · folder-minus · folder-open · folder-open-dot · folder-output · folder-pen · folder-plus · folder-root · folder-search · folder-search-2 · folder-symlink · folder-sync · folder-tree · folder-up · folder-x · folders · footprints · forklift · form · forward · frame · frown · fuel · fullscreen · funnel · funnel-plus · funnel-x · gallery-horizontal · gallery-horizontal-end · gallery-thumbnails · gallery-vertical · gallery-vertical-end · gamepad · gamepad-2 · gamepad-directional · gauge · gavel · gem · georgian-lari · ghost · gift · git-branch · git-branch-minus · git-branch-plus · git-commit-horizontal · git-commit-vertical · git-compare · git-compare-arrows · git-fork · git-graph · git-merge · git-merge-conflict · git-pull-request · git-pull-request-arrow · git-pull-request-closed · git-pull-request-create · git-pull-request-create-arrow · git-pull-request-draft · glass-water · glasses · globe · globe-check · globe-lock · globe-off · globe-x · goal · gpu · graduation-cap · grape · grid-2x2 · grid-2x2-check · grid-2x2-plus · grid-2x2-x · grid-3x2 · grid-3x3 · grip · grip-horizontal · grip-vertical · group · guitar · ham · hamburger · hammer · hand · hand-coins · hand-fist · hand-grab · hand-heart · hand-helping · hand-metal · hand-platter · handbag · handshake · hard-drive · hard-drive-download · hard-drive-upload · hard-hat · hash · hat-glasses · haze · hd · hdmi-port · heading · heading-1 · heading-2 · heading-3 · heading-4 · heading-5 · heading-6 · headphone-off · headphones · headset · heart · heart-crack · heart-handshake · heart-minus · heart-off · heart-plus · heart-pulse · heart-x · heater · helicopter · hexagon · highlighter · hop · hop-off · hospital · hotel · hourglass · house · house-heart · house-plug · house-plus · house-wifi · ice-cream-bowl · ice-cream-cone · id-card · id-card-lanyard · image · image-down · image-minus · image-off · image-play · image-plus · image-up · image-upscale · images · import · inbox · indian-rupee · infinity · info · inspection-panel · italic · iteration-ccw · iteration-cw · japanese-yen · joystick · kanban · kayak · key · key-round · key-square · keyboard · keyboard-music · keyboard-off · lamp · lamp-ceiling · lamp-desk · lamp-floor · lamp-wall-down · lamp-wall-up · land-plot · landmark · languages · laptop · laptop-minimal · laptop-minimal-check · lasso · lasso-select · laugh · layers · layers-2 · layers-minus · layers-plus · layout-dashboard · layout-freeform · layout-grid · layout-list · layout-panel-left · layout-panel-top · layout-template · leaf · leafy-green · lectern · lens-concave · lens-convex · library · library-big · life-buoy · ligature · lightbulb · lightbulb-off · line-dot-right-horizontal · line-squiggle · line-style · link · link-2 · link-2-off · list · list-check · list-checks · list-chevrons-down-up · list-chevrons-up-down · list-collapse · list-end · list-filter · list-filter-plus · list-indent-decrease · list-indent-increase · list-minus · list-music · list-ordered · list-plus · list-restart · list-sort-ascending · list-sort-descending · list-start · list-todo · list-tree · list-video · list-x · loader · loader-circle · loader-pinwheel · locate · locate-fixed · locate-off · lock · lock-keyhole · lock-keyhole-open · lock-open · log-in · log-out · logs · lollipop · luggage · magnet · mail · mail-check · mail-minus · mail-open · mail-plus · mail-question-mark · mail-search · mail-warning · mail-x · mailbox · mails · map · map-minus · map-pin · map-pin-check · map-pin-check-inside · map-pin-house · map-pin-minus · map-pin-minus-inside · map-pin-off · map-pin-pen · map-pin-plus · map-pin-plus-inside · map-pin-search · map-pin-x · map-pin-x-inside · map-pinned · map-plus · mars · mars-stroke · martini · maximize · maximize-2 · medal · megaphone · megaphone-off · meh · memory-stick · menu · merge · message-circle · message-circle-check · message-circle-code · message-circle-dashed · message-circle-heart · message-circle-more · message-circle-off · message-circle-plus · message-circle-question-mark · message-circle-reply · message-circle-warning · message-circle-x · message-square · message-square-check · message-square-code · message-square-dashed · message-square-diff · message-square-dot · message-square-heart · message-square-lock · message-square-more · message-square-off · message-square-plus · message-square-quote · message-square-reply · message-square-share · message-square-text · message-square-warning · message-square-x · messages-square · metronome · mic · mic-audio-lines · mic-off · mic-signal · mic-vocal · microchip · microscope · microwave · milestone · milk · milk-off · minimize · minimize-2 · minus · mirror-rectangular · mirror-round · monitor · monitor-check · monitor-cloud · monitor-cog · monitor-dot · monitor-down · monitor-off · monitor-pause · monitor-play · monitor-smartphone · monitor-speaker · monitor-stop · monitor-up · monitor-x · moon · moon-star · mosque · motorbike · mountain · mountain-snow · mouse · mouse-left · mouse-off · mouse-pointer · mouse-pointer-2 · mouse-pointer-2-off · mouse-pointer-ban · mouse-pointer-click · mouse-right · move · move-3d · move-diagonal · move-diagonal-2 · move-down · move-down-left · move-down-right · move-horizontal · move-left · move-right · move-up · move-up-left · move-up-right · move-vertical · music · music-2 · music-3 · music-4 · navigation · navigation-2 · navigation-2-off · navigation-off · network · newspaper · nfc · non-binary · notebook · notebook-pen · notebook-tabs · notebook-text · notepad-text · notepad-text-dashed · nut · nut-off · octagon · octagon-alert · octagon-minus · octagon-pause · octagon-x · omega · option · orbit · origami · package · package-2 · package-check · package-minus · package-open · package-plus · package-search · package-x · paint-bucket · paint-roller · paintbrush · paintbrush-vertical · palette · panda · panel-bottom · panel-bottom-close · panel-bottom-dashed · panel-bottom-open · panel-left · panel-left-close · panel-left-dashed · panel-left-open · panel-left-right-dashed · panel-right · panel-right-close · panel-right-dashed · panel-right-open · panel-top · panel-top-bottom-dashed · panel-top-close · panel-top-dashed · panel-top-open · panels-left-bottom · panels-right-bottom · panels-top-left · paper-bag · paperclip · parasol · parentheses · parking-meter · party-popper · pause · paw-print · pc-case · pen · pen-line · pen-off · pen-tool · pencil · pencil-line · pencil-off · pencil-ruler · pencil-sparkles · pentagon · percent · person-standing · phi · philippine-peso · phone · phone-call · phone-forwarded · phone-incoming · phone-missed · phone-off · phone-outgoing · pi · piano · pickaxe · picture-in-picture · picture-in-picture-2 · piggy-bank · pilcrow · pilcrow-left · pilcrow-right · pill · pill-bottle · pin · pin-off · pipette · pizza · plane · plane-landing · plane-takeoff · play · play-off · plug · plug-2 · plug-zap · plus · pocket-knife · podium · pointer · pointer-off · popcorn · popsicle · pound-sterling · power · power-off · presentation · printer · printer-check · printer-x · projector · proportions · puzzle · pyramid · qr-code · quote · rabbit · radar · radiation · radical · radio · radio-off · radio-receiver · radio-tower · radius · rainbow · rat · ratio · receipt · receipt-cent · receipt-euro · receipt-indian-rupee · receipt-japanese-yen · receipt-pound-sterling · receipt-russian-ruble · receipt-swiss-franc · receipt-text · receipt-turkish-lira · rectangle-circle · rectangle-ellipsis · rectangle-goggles · rectangle-horizontal · rectangle-vertical · recycle · redo · redo-2 · redo-dot · refresh-ccw · refresh-ccw-dot · refresh-cw · refresh-cw-off · refrigerator · regex · remove-formatting · repeat · repeat-1 · repeat-2 · repeat-off · replace · replace-all · reply · reply-all · rewind · ribbon · road · rocket · rocking-chair · roller-coaster · rose · rotate-3d · rotate-ccw · rotate-ccw-clock · rotate-ccw-key · rotate-ccw-square · rotate-cw · rotate-cw-fading-clock · rotate-cw-square · route · route-off · router · rows-2 · rows-3 · rows-4 · rss · ruler · ruler-dimension-line · russian-ruble · sailboat · salad · sandwich · satellite · satellite-dish · saudi-riyal · save · save-all · save-check · save-off · save-pen · save-plus · scale · scale-3d · scaling · scan · scan-barcode · scan-box · scan-eye · scan-face · scan-heart · scan-line · scan-qr-code · scan-search · scan-square · scan-text · school · scissors · scissors-line-dashed · scooter · screen-share · screen-share-off · scroll · scroll-text · search · search-alert · search-check · search-code · search-slash · search-x · section · send · send-horizontal · send-to-back · separator-horizontal · separator-vertical · server · server-cog · server-crash · server-off · server-plus · settings · settings-2 · shapes · share · share-2 · sheet · shell · shelving-unit · shield · shield-alert · shield-ban · shield-check · shield-cog · shield-cog-corner · shield-ellipsis · shield-half · shield-keyhole · shield-minus · shield-off · shield-plus · shield-question-mark · shield-user · shield-x · ship · ship-wheel · shirt · shopping-bag · shopping-basket · shopping-cart · shovel · shower-head · shredder · shrimp · shrink · shrub · shuffle · sigma · signal · signal-high · signal-low · signal-medium · signal-zero · signature · signpost · signpost-big · siren · skip-back · skip-forward · skull · slash · slice · sliders-horizontal · sliders-vertical · smartphone · smartphone-charging · smartphone-nfc · smile · smile-plus · snail · snowflake · soap-dispenser-droplet · sofa · solar-panel · soup · space · spade · sparkle · sparkles · speaker · speech · spell-check · spell-check-2 · spline · spline-pointer · split · spool · sport-shoe · spotlight · spray-can · sprout · square · square-activity · square-arrow-down · square-arrow-down-left · square-arrow-down-right · square-arrow-left · square-arrow-out-down-left · square-arrow-out-down-right · square-arrow-out-up-left · square-arrow-out-up-right · square-arrow-right · square-arrow-right-enter · square-arrow-right-exit · square-arrow-up · square-arrow-up-left · square-arrow-up-right · square-asterisk · square-bottom-dashed-scissors · square-centerline-dashed-horizontal · square-centerline-dashed-vertical · square-chart-gantt · square-check · square-check-big · square-chevron-down · square-chevron-left · square-chevron-right · square-chevron-up · square-code · square-dashed · square-dashed-bottom · square-dashed-bottom-code · square-dashed-kanban · square-dashed-mouse-pointer · square-dashed-text · square-dashed-top-solid · square-divide · square-dot · square-equal · square-function · square-kanban · square-library · square-m · square-menu · square-minus · square-mouse-pointer · square-off · square-parking · square-parking-off · square-pause · square-pen · square-percent · square-pi · square-pilcrow · square-play · square-plus · square-power · square-radical · square-round-corner · square-scissors · square-sigma · square-slash · square-split-horizontal · square-split-vertical · square-square · square-stack · square-star · square-stop · square-terminal · square-user · square-user-round · square-x · squares-exclude · squares-intersect · squares-subtract · squares-unite · squircle · squircle-dashed · squirrel · stamp · star · star-check · star-half · star-minus · star-off · star-plus · star-x · step-back · step-forward · stethoscope · sticker · sticky-note · sticky-note-check · sticky-note-minus · sticky-note-off · sticky-note-plus · sticky-note-x · sticky-notes · stone · store · stretch-horizontal · stretch-vertical · strikethrough · subscript · summary · sun · sun-dim · sun-medium · sun-moon · sun-snow · sunrise · sunset · superscript · swatch-book · swiss-franc · switch-camera · sword · swords · syringe · table · table-2 · table-cells-merge · table-cells-split · table-columns-split · table-of-contents · table-properties · table-rows-split · tablet · tablet-smartphone · tablets · tag · tag-plus · tag-x · tags · tally-1 · tally-2 · tally-3 · tally-4 · tally-5 · tangent · target · telescope · tent · tent-tree · terminal · test-tube · test-tube-diagonal · test-tubes · text-align-center · text-align-end · text-align-justify · text-align-start · text-cursor · text-cursor-input · text-initial · text-quote · text-search · text-wrap · theater · thermometer · thermometer-snowflake · thermometer-sun · thumbs-down · thumbs-up · ticket · ticket-check · ticket-minus · ticket-percent · ticket-plus · ticket-slash · ticket-x · tickets · tickets-plane · timeline · timer · timer-off · timer-reset · toggle-left · toggle-right · toilet · tool-case · toolbox · tornado · torus · touchpad · touchpad-off · towel-rack · tower-control · toy-brick · tractor · traffic-cone · train-front · train-front-tunnel · train-track · tram-front · transgender · trash · trash-2 · tree-deciduous · tree-palm · tree-pine · trees · trending-down · trending-up · trending-up-down · triangle · triangle-alert · triangle-dashed · triangle-right · trophy · truck · truck-electric · turkish-lira · turntable · turtle · tv · tv-minimal · tv-minimal-play · type · type-outline · umbrella · umbrella-off · underline · undo · undo-2 · undo-dot · unfold-horizontal · unfold-vertical · ungroup · university · unlink · unlink-2 · unplug · upload · usb · user · user-check · user-cog · user-key · user-lock · user-minus · user-pen · user-plus · user-round · user-round-arrow-left · user-round-check · user-round-cog · user-round-key · user-round-minus · user-round-pen · user-round-plus · user-round-search · user-round-x · user-search · user-shield · user-star · user-x · users · users-round · utensils · utensils-crossed · utility-pole · van · variable · vault · vector-square · vegan · venetian-mask · venus · venus-and-mars · vibrate · vibrate-off · video · video-off · videotape · view · voicemail · volleyball · volume · volume-1 · volume-2 · volume-off · volume-x · vote · wallet · wallet-cards · wallet-minimal · wallpaper · wand · wand-sparkles · warehouse · washing-machine · watch · waves-arrow-down · waves-arrow-up · waves-horizontal · waves-ladder · waves-vertical · waypoints · webcam · webcam-off · webhook · webhook-off · weight · weight-tilde · wheat · wheat-off · whole-word · wifi · wifi-cog · wifi-high · wifi-low · wifi-off · wifi-pen · wifi-sync · wifi-zero · wind · wind-arrow-down · wine · wine-off · workflow · worm · wrench · wrench-off · x · x-line-top · zap · zap-off · zodiac-aquarius · zodiac-aries · zodiac-cancer · zodiac-capricorn · zodiac-gemini · zodiac-leo · zodiac-libra · zodiac-ophiuchus · zodiac-pisces · zodiac-sagittarius · zodiac-scorpio · zodiac-taurus · zodiac-virgo · zoom-in · zoom-out