);
// Well — vertical tubing from horizon down through reservoir
// Dynamic height constraints ensure it never extends below the reservoir bottom perforations
const Well = () => {
const yBotVal = capRockY(700) + 160;
const heightVh = `${yBotVal * 0.1}vh`;
return (
{/* Outer steel casing with bright specular highlights */}
{/* Inner flow tube with bright neon green glow */}
{/* Perforated intervals (horizontal flow slots) inside the reservoir sandstone */}
{[1, 2, 3].map(i => (
))}
{/* injection point flare at bottom */}
);
};
// Streamlines — gentle curves flowing through the reservoir
// Refactored to dynamically trace caprock-parallel contours
const Streamlines = ({ isPlaying }) => {
// 3 left-migrating streamlines
const leftPaths = [35, 75, 115].map(d => {
let path = `M 700 ${capRockY(700) + d}`;
for (let x = 690; x >= 0; x -= 10) {
path += ` L ${x} ${capRockY(x) + d}`;
}
return path;
});
// 3 right-migrating streamlines
const rightPaths = [35, 75, 115].map(d => {
let path = `M 700 ${capRockY(700) + d}`;
for (let x = 710; x <= 1000; x += 10) {
path += ` L ${x} ${capRockY(x) + d}`;
}
return path;
});
return (
);
};
/* =====================================================
Simulation cells — sparse pulsing grid, only in reservoir
===================================================== */
const SimCells = ({ isPlaying }) => {
const cells = useMemo(() => {
const arr = [];
const rows = 4, cols = 18;
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
const x = 6 + c * 5.2; // % across viewport
// Carve a wide gap around the well at 70% so the plume reads cleanly
if (x > 46 && x < 96) continue;
// Carve out the left depth-axis area
if (x < 12) continue;
// Carve the small left anticline area too
if (x > 14 && x < 26) continue;
arr.push({
left: `${x}%`,
top: `${62 + r * 6.5}vh`,
delay: Math.random() * 4,
duration: 2.4 + Math.random() * 2,
});
}
}
return arr;
}, []);
return (
<>
{cells.map((c, i) => (
))}
);
};
/* =====================================================
CO2 plume — saturation contour map. Banded colors run
from a yellow high-saturation core out through green to
a faint mint outer halo (low saturation / dissolved CO2).
Gravity-tongue shape: wide thin lens under the anticline
crest, narrowing into a column down to the well at
(x=700, y=400).
===================================================== */
const CAP_ROCK_PATH = CAP_ROCK_UNDERSIDE;
// Band 1: outermost (sw ≈ 0.1, mostly dissolved/dilute CO2)
// Naturally tapered gravity-tongue path that slopes down to zero thickness at outer tips (380 & 960)
const PLUME_B1 =
"M 380 156 " +
"C 420 168, 460 170, 510 172 " +
"C 550 168, 585 156, 615 140 " +
"C 640 112, 660 80, 680 52 " +
"C 695 38, 710 36, 728 38 " +
"C 745 58, 765 90, 785 122 " +
"C 810 140, 840 152, 880 162 " +
"C 920 156, 960 148, 960 152 " +
"C 900 180, 800 190, 722 190 " +
"C 720 252, 714 342, 708 410 L 692 410 " +
"C 686 342, 680 252, 678 190 " +
"C 600 190, 480 180, 380 156 Z";
// Band 2: mid saturation (sw ≈ 0.3)
const PLUME_B2 =
"M 470 168 " +
"C 500 168, 530 160, 555 148 " +
"C 590 124, 625 92, 660 64 " +
"C 678 48, 694 42, 710 40 " +
"C 728 44, 745 64, 760 88 " +
"C 778 115, 800 138, 825 152 " +
"C 855 165, 890 172, 920 175 " +
"C 860 182, 800 186, 718 186 " +
"C 716 248, 710 338, 706 405 L 694 405 " +
"C 690 338, 684 248, 682 186 " +
"C 620 186, 540 182, 470 168 Z";
// Band 3: high saturation (sw ≈ 0.5)
const PLUME_B3 =
"M 555 166 " +
"C 580 158, 605 145, 625 125 " +
"C 650 95, 675 65, 695 50 " +
"C 712 46, 725 50, 738 64 " +
"C 755 86, 775 115, 800 138 " +
"C 825 155, 855 168, 885 175 " +
"C 820 180, 770 182, 716 182 " +
"C 714 244, 710 330, 705 400 L 695 400 " +
"C 690 330, 686 244, 684 182 " +
"C 640 182, 600 180, 555 166 Z";
// Band 4: very high saturation (sw ≈ 0.7)
const PLUME_B4 =
"M 630 166 " +
"C 650 154, 670 132, 685 105 " +
"C 698 74, 708 52, 712 46 " +
"C 725 50, 740 72, 758 98 " +
"C 778 123, 800 146, 830 160 " +
"C 850 170, 870 174, 885 176 " +
"C 830 178, 780 178, 714 178 " +
"C 712 238, 708 320, 704 395 L 696 395 " +
"C 692 320, 688 238, 686 178 " +
"C 660 178, 645 174, 630 166 Z";
// Band 5: peak core (sw ≈ 0.85+, near-saturated CO2)
const PLUME_B5 = "M 695 38 C 705 38, 716 46, 718 56 C 720 96, 716 200, 710 393 L 690 393 C 684 200, 680 96, 682 56 C 684 46, 690 38, 695 38 Z";
const Plume = ({ h, hMax, h2, h2Max, time, isPlaying }) => {
return (
<>
{/* Brine label far from the plume (left side) — context label with improved high contrast */}
Brine
);
};
/* =====================================================
One clean annotation pointing at the reservoir's VE concept
===================================================== */
const Annotation = () => (
Vertical Equilibrium model of CO2 injection — orders of magnitude faster than full 3D.
);
/* =====================================================
IDENTITY — sits firmly inside the sky region
===================================================== */
const Identity = () => (
Ph.D. Candidate · Heriot-Watt University
Sa’eed Telvari
Building Vertical Equilibrium models for simulating CO2 storage in depleted gas reservoirs — the cross-section below is essentially the thing I simulate.