// RAID — Manimo lesson scene.
// Three layouts of the same four disks: RAID 0 (striping), RAID 1
// (mirroring), and RAID 5 (striping + parity). In each beat a block
// "A" arrives and is laid across the disks the way that level
// prescribes; then one disk fails and we observe the consequence.
//
// Genuine animation lives in each RAID beat: stripe tokens travel
// from a "block A" buffer above the disks down into specific disk
// slots over a sprite-local time window. The disk-failure event then
// flips one disk's state and either kills the block (RAID 0), leaves
// a complete copy (RAID 1), or triggers a parity-xor recompute (RAID 5)
// that visually rebuilds the missing stripe from the survivors.
const SCENE_DURATION = 53;
const NARRATION = [
/* 0.00– 9.78 */ 'A single disk gives you one shot at not failing. RAID groups several disks behind one logical drive and trades off speed, capacity, and survival.',
/* 9.78–21.59 */ 'RAID zero splits each block across all the disks. Reads and writes go in parallel, so throughput multiplies. But one disk dies and the whole array is lost.',
/* 21.59–32.65 */ 'RAID one mirrors every block onto two disks. You lose half your capacity, but a single disk failure leaves a complete copy behind.',
/* 32.65–43.92 */ "RAID five stripes data across all the disks plus one parity stripe — the bitwise xor of the others. Lose any single disk, and the missing stripe can be xor'd back from what's left.",
/* 43.92–56.00 */ 'RAID zero buys speed and gambles. RAID one buys safety and pays half. RAID five buys both and pays one disk out of however many you have.',
];
const NARRATION_AUDIO = 'audio/raid/scene.mp3';
const NUM_DISKS = 4;
function raidGeometry(portrait) {
return portrait
? { vbW: 600, vbH: 560,
srcX: 60, srcY: 70, srcW: 480, srcH: 90,
diskRowY: 250, diskW: 100, diskH: 200, diskGap: 18,
eyebrowFs: 11, captionFs: 14 }
: { vbW: 1080, vbH: 460,
srcX: 280, srcY: 70, srcW: 520, srcH: 80,
diskRowY: 210, diskW: 150, diskH: 200, diskGap: 30,
eyebrowFs: 12, captionFs: 14 };
}
function diskXY(G, i) {
const totalW = NUM_DISKS * G.diskW + (NUM_DISKS - 1) * G.diskGap;
const startX = (G.vbW - totalW) / 2;
return {
x: startX + i * (G.diskW + G.diskGap),
y: G.diskRowY,
};
}
function diskSlotXY(G, i, slotIdx, slotCount = 1) {
const d = diskXY(G, i);
const slotH = (G.diskH - 40) / slotCount;
return {
x: d.x + G.diskW / 2,
y: d.y + 28 + slotIdx * slotH + slotH / 2,
};
}
function Disk({ G, idx, dead, label, slots }) {
// slots: [{ idx, label, color }] — already in residence
const d = diskXY(G, idx);
return (
{label}
{slots && slots.map((s, i) => {
const xy = diskSlotXY(G, idx, s.idx, s.slotCount || 1);
return (
{s.label}
);
})}
{dead && (
<>
)}
);
}
function StripeToken({ x, y, label, color, w = 100, h = 32, opacity = 1 }) {
return (
{label}
);
}
function SourceBlock({ G, label, color, opacity = 1 }) {
return (
{label}
BLOCK
);
}
function Scene() {
return (
);
}
// ─── Beat 2: RAID 0 — striping ───────────────────────────────────────────
// Block A splits into A0..A3 and travels into each disk in parallel.
// Then at t=6 disk 2 fails — the full block is lost because A2 is gone.
function Raid0Beat() {
const portrait = usePortrait();
const G = raidGeometry(portrait);
const { localTime } = useSprite();
// Schedule:
// 0.4..0.8 eyebrow + disks fade in
// 1.0..1.4 block A appears
// 2.0..4.0 A splits into A0..A3 stripes that drop into each disk
// 5.5.. disk 2 dies; "BLOCK LOST" stamp on A
const stripeFrac = clamp((localTime - 2.0) / 2.0, 0, 1);
const stripeEased = Easing.easeInOutCubic(stripeFrac);
const stripesPlaced = stripeFrac >= 0.99;
const failed = localTime > 5.5;
const stampOp = clamp((localTime - 6.2) / 0.5, 0, 1);
return (
);
}
// ─── Beat 3: RAID 1 — mirroring ─────────────────────────────────────────
// Block A duplicates into TWO disks (D0, D1). D2 and D3 host a second
// mirror pair, but we focus on the A pair for visual simplicity.
// Then disk D0 dies; D1 still has a complete A.
function Raid1Beat() {
const portrait = usePortrait();
const G = raidGeometry(portrait);
const { localTime } = useSprite();
const stripeFrac = clamp((localTime - 1.6) / 1.8, 0, 1);
const stripeEased = Easing.easeInOutCubic(stripeFrac);
const placed = stripeFrac >= 0.99;
const failed = localTime > 5.0;
// After failure, highlight D1 (the survivor)
const survivorOp = (() => {
if (!failed) return 0;
const t = clamp((localTime - 5.4) / 0.5, 0, 1);
return t;
})();
return (
);
}
// ─── Beat 4: RAID 5 — parity ────────────────────────────────────────────
// Block A is split into A0, A1, A2 across three disks plus Ap = A0⊕A1⊕A2
// on the fourth. Then disk 1 dies — we recompute A1 = A0⊕A2⊕Ap.
function Raid5Beat() {
const portrait = usePortrait();
const G = raidGeometry(portrait);
const { localTime } = useSprite();
// Schedule:
// 0.4..0.8 eyebrow + disks fade in
// 1.4..3.4 stripes A0..A2 and parity Ap drop into each disk
// 4.2.. disk 1 dies
// 5.6..7.6 reconstruction: a "A1 = A0 ⊕ A2 ⊕ Ap" overlay; the missing
// slot fills back in to show the rebuild
const placeFrac = clamp((localTime - 1.4) / 2.0, 0, 1);
const placeEased = Easing.easeInOutCubic(placeFrac);
const placed = placeFrac >= 0.99;
const failed = localTime > 4.2;
const rebuildFrac = clamp((localTime - 5.6) / 2.0, 0, 1);
const rebuilt = rebuildFrac >= 0.99;
const labels = ['A0', 'A1', 'A2', 'Ap'];
const colors = ['var(--amber-400)', 'var(--amber-400)', 'var(--amber-400)', 'var(--violet-400)'];
return (