// Coulomb's Law: The Inverse-Square Tug — Manimo lesson scene. // Generated from motion/coulombs-law.spec.json. Standalone — opens the // electromagnetism arc; sits adjacent to rc-circuit and rlc-pendulum. // // Beats (timed to single-track narration in motion/audio/coulombs-law/): // 0.00– 4.49 Manimo enters; hook question // 4.49–15.05 Two charges on a line: r between them, like-repels arrows // 15.05–27.18 Coulomb's law payoff: F = k · q₁q₂ / r² // 27.18–37.59 Genuine animation — sweep r, force shrinks as 1/r², graph // traces in sync with the moving charge // 37.59–46.00 Takeaway — same shape as gravity but stronger and signed // // Authoring notes: // • All delays below are relative to the enclosing Sprite's start (localTime). // • SvgFadeIn for every element inside _{` and tweak font size to match.
function Sub({ children }) {
return (
_{children}
);
}

function Scene() {
return (

);
}

// ─── Beat 1: Manimo intro ─────────────────────────────────────────────────
function ManimoBubbleIntro() {
const portrait = usePortrait();
return (

Two charges, nothing else — what tugs them?

);
}

// ─── Beat 2: Two charges on a line, repulsive arrows ──────────────────────
// Landscape: 880×360 viewBox, charges centred horizontally, r-bracket above,
// repulsion arrows along the line.
// Portrait: same horizontal arrangement but tighter — stacking vertically
// would lose the "line of force" metaphor that makes this beat read.
function ChargesAndLine() {
const portrait = usePortrait();
const G = portrait
? { vbW: 640, vbH: 380, q1Cx: 180, q2Cx: 460, cy: 170, qR: 30,
bracketY: 120, bracketTickTop: 114, bracketTickBot: 126,
rLabelY: 108, fLen: 60, fY: 180, fLabelOffset: 22,
fontCharge: 18, fontR: 22, fontF: 20, fontCaption: 14,
captionY: 320 }
: { vbW: 880, vbH: 360, q1Cx: 320, q2Cx: 600, cy: 180, qR: 32,
bracketY: 130, bracketTickTop: 124, bracketTickBot: 136,
rLabelY: 116, fLen: 76, fY: 188, fLabelOffset: 26,
fontCharge: 20, fontR: 24, fontF: 22, fontCaption: 14,
captionY: 310 };

const f1Tip = G.q1Cx - G.qR - G.fLen; // left charge — arrow points left
const f2Tip = G.q2Cx + G.qR + G.fLen; // right charge — arrow points right

return (

);
}

// ─── Beat 3: Coulomb's law payoff ─────────────────────────────────────────
function FormulaPayoff() {
const portrait = usePortrait();
return (

Coulomb's law

F = k · q₁q₂ / r²

k ≈ 8.99 × 10⁹ N·m²/C² · Coulomb's constant

double a charge → force doubles.

double the distance → force quarters.

);
}

// ─── Beat 4: Inverse-square sweep (genuine animation) ─────────────────────
// The animation budget for this scene lives here. r is swept smoothly from
// rMin to rMax across the visible part of the beat. The right charge moves
// with r, the on-charge force arrow shrinks as 1/r², and a marker on the
// F vs r graph below tracks the same (r, F) so the moving charge and the
// curve grow together in lockstep. Everything is derived from a single
// time-dependent r in this frame — no parallel state to drift.
function InverseSquareSweep() {
const portrait = usePortrait();
const G = portrait
? {
// Diagram (top half)
vbW: 660, vbH: 760,
diagY: 180, q1Cx: 130, qR: 22,
rMinPx: 100, rMaxPx: 360,
fAtRMinPx: 90, // visual length when r is at minimum
// Graph (bottom half)
graphX0: 100, graphY0: 700, graphX1: 600, graphY1: 440,
axisLabelFont: 13, captionY: 740, captionFont: 14,
chargeLabelFont: 14, fontR: 18, fontF: 16,
}
: {
vbW: 1100, vbH: 540,
diagY: 130, q1Cx: 180, qR: 24,
rMinPx: 120, rMaxPx: 700,
fAtRMinPx: 110,
graphX0: 180, graphY0: 470, graphX1: 1000, graphY1: 270,
axisLabelFont: 13, captionY: 510, captionFont: 14,
chargeLabelFont: 16, fontR: 20, fontF: 18,
};

const { localTime, duration: spriteDur } = useSprite();
// Sweep envelope: 0.6s settle in, sweep across the middle ~75% of the beat,
// hold the final value for the last beat-end so the takeaway transitions
// cleanly. Eased so the early-fast / late-slow rate feels deliberate.
const sweepStart = 0.8;
const sweepEnd = spriteDur - 1.4;
const tFrac = clamp((localTime - sweepStart) / Math.max(0.001, sweepEnd - sweepStart), 0, 1);
const eased = Easing.easeInOutCubic(tFrac);
const rPx = G.rMinPx + (G.rMaxPx - G.rMinPx) * eased;

// Inverse-square force, normalised so |F| at rMinPx is fAtRMinPx pixels.
const fLen = G.fAtRMinPx * (G.rMinPx * G.rMinPx) / (rPx * rPx);

const q2Cx = G.q1Cx + rPx;
const fStart = q2Cx + G.qR;
const fTip = fStart + fLen;

// Graph: x-axis from rMinPx to rMaxPx maps onto graphX0..graphX1.
// y-axis: F at rMinPx (= fAtRMinPx scaled) sits at graphY0 (origin/baseline);
// F shrinks to ≈1/16 of that at r=4·rMin → leave headroom above origin.
const graphW = G.graphX1 - G.graphX0;
const graphH = G.graphY0 - G.graphY1; // positive — y grows downward
const fMax = G.fAtRMinPx; // at rPx = rMinPx
const rToGx = r => G.graphX0 + ((r - G.rMinPx) / (G.rMaxPx - G.rMinPx)) * graphW;
const fToGy = f => G.graphY0 - (f / fMax) * graphH;

// Pre-compute the full F(r) curve path so we can mask it by current r.
const curveSamples = 60;
const curvePts = [];
for (let i = 0; i <= curveSamples; i++) {
const r = G.rMinPx + (G.rMaxPx - G.rMinPx) * (i / curveSamples);
const f = G.fAtRMinPx * (G.rMinPx * G.rMinPx) / (r * r);
curvePts.push(`${i === 0 ? 'M' : 'L'} ${rToGx(r).toFixed(2)} ${fToGy(f).toFixed(2)}`);
}
const fullCurveD = curvePts.join(' ');

// Marker on the curve at current (r, F)
const markerX = rToGx(rPx);
const markerY = fToGy(fLen);

// Reveal the curve only up to the current r — clip with a rectangle that
// grows with the swept charge.
const clipW = Math.max(0, markerX - G.graphX0);

return (

);
}

// ─── Beat 5: Takeaway ─────────────────────────────────────────────────────
function Takeaway() {
const portrait = usePortrait();
return (

Same shape as gravity — but stronger, and signed.

Charges push or pull. Mass only ever pulls.

(electricity is gravity's louder, two-faced cousin)

);
}

// Expose narration to external tooling (TTS generation, subtitle export)
window.sceneNarration = NARRATION;

// ─── Mount ────────────────────────────────────────────────────────────────
function App() {
return (

);
}

ReactDOM.createRoot(document.getElementById('root')).render();}