PEM Stack Explainer

Hydrogen & fuel cell systems · motion explainer

How a PEM electrolyzer stack works, frame by frame

A 34-second anatomy explainer of a generic proton exchange membrane (PEM) electrolyzer stack. It moves from the plates and membrane electrode assembly to water feed, gas evolution, cooling, and the balance of plant, and every one of its 1,020 frames is computed from the frame number alone.

Loading fonts and preparing frame 0…
00:00.00 · F 0000

    Keys: Space play/pause · ←→ frame step · 1–5 chapters · F fullscreen

    Download the MP4 (1080p, 34 s) View the renderer on GitHub How it is built

    Five chapters, one causal chain

    Each camera move keeps the previous stage on screen, so you can see what causes what: water arrives, power splits it, gas leaves, heat follows, and the plant supports all of it.

    1. Reveal MEA & plates

      An exterior view of a generic stack, then section A–A sweeps down through the flow channels. The camera dives from stack scale to one repeating cell: bipolar plate, anode flow channel, porous transport layer, catalyst-coated membrane, gas diffusion layer, and cathode flow channel. Layer thicknesses are exaggerated so each one is readable.

    2. Water feed

      Deionized water enters the anode inlet manifold, which feeds every cell in parallel. Water rises through each anode channel and wets the porous transport layer until it reaches the anode catalyst. The cathode side has no liquid feed in this generic configuration.

    3. Gas evolution

      DC power turns on. At molecular scale, in slow motion, water splits at the anode catalyst into oxygen, protons, and electrons. Protons cross the membrane; electrons take the external circuit; they recombine as hydrogen at the cathode. Back at cell scale, oxygen leaves with the excess water and hydrogen leaves through its own manifold.

    4. Cooling

      Cell losses appear as heat, concentrated in the membrane electrode assembly. Most of the circulating water is not consumed, so it carries that heat out of the stack. A qualitative diagram shows water temperature rising along a channel, and the camera pulls back to the loop: tank, pump, heat exchanger, and return.

    5. Balance of plant

      The stack becomes one block in the balance of plant: AC power is transformed and rectified to DC; feed water is filtered and deionized; a tank separates oxygen from the circulating water; hydrogen is separated from water, dried, and delivered; sensors and controls close the loop. The view holds on the complete system.

    How to read the colors and shapes

    The three accents are explanatory overlays, not literal light or emission. They mark roles, so the same color means the same job at every scale.

    Cyan · primary pathway

    Water, protons, and product gas: the material that moves through the stack.

    Gold · energy and actuation

    DC power, electrons, heat, and actuators such as the circulation pump.

    Violet · sensing and state change

    Gas formation events, temperature states, sensors, and control signals.

    Solid fills · hardware

    Plates, layers, and equipment. Cut solids in the section view carry diagonal hatching.

    Translucent contours · fields

    The heat field in the cooling chapter: dashed isotherms and gradients, not objects.

    Grid panels · math and diagrams

    Equations, the charge-path schematic, and the qualitative temperature diagram.

    Accuracy and review status

    Review status: consolidated working brief, not a certified engineering reference. Verify against the sources below before publication or technical use.

    Sourced on screen

    • Anode and cathode half-reactions and the net reaction (U.S. DOE).
    • The membrane passes protons; electrons take the external circuit (U.S. DOE).
    • Typical PEM operating range of about 70–90 °C, shown as a band, not a value (U.S. DOE).
    • Cells electrically in series, water and gas in parallel; end plates; layer materials described as “typical” (NREL).
    • Balance-of-plant blocks: transformer and rectifier, deionization, tank, radiator-type cooling, hydrogen separation and drying (NREL).

    Illustrative by design

    • Generic PEM stack, not any product. Six cells shown; real stacks vary.
    • Not to scale. Layer thicknesses are exaggerated so each layer is legible.
    • Molecular scale is schematic and shown in slow motion; flow speeds are illustrative.
    • The heat field and temperature diagram are qualitative. No values are implied.
    • No efficiency, output, cost, or lifetime claims. No invented specifications.
    • Camera, palette, cutaways, and timing are original illustrative directions.

    Transcript

    The captions burned into the video, with timecodes. Select a timecode to jump there.

    01 · Reveal MEA & plates

    1. A PEM stack repeats one cell many times, clamped between two end plates.
    2. Section A–A cuts through the flow channels. Nothing is taken apart.
    3. Each cell: bipolar plates, porous transport layers, and a catalyst-coated membrane.

    02 · Water feed

    1. Deionized water enters through the anode inlet manifold.
    2. The manifold feeds every cell’s anode channel in parallel.
    3. Water spreads through the porous transport layer to the anode catalyst.

    03 · Gas evolution

    1. DC voltage across the cell supplies the energy to split water.
    2. At the anode catalyst, water splits into O2, protons, and electrons.
    3. Protons cross the membrane. Electrons take the external circuit. They recombine as H2.
    4. Bubbles detach and ride the channels to the outlet manifolds.

    04 · Cooling

    1. Cell losses appear as heat, concentrated in the membrane electrode assembly.
    2. Most of the water is not consumed. It circulates and carries the heat out.
    3. Outside the stack, a heat exchanger rejects that heat and the cooled water returns.

    05 · Balance of plant

    1. The stack is one block in a larger system: the balance of plant.
    2. Power: AC is transformed and rectified to DC for the stack.
    3. Water: filtered, deionized, circulated, and separated from O2.
    4. Hydrogen: separated from water, dried, then delivered.
    5. Sensors and controls close the loop.
    6. Complete system view. Generic PEM, simplified for explanation.

    How it is built

    Deterministic timeline

    The renderer is a pure function of the frame index. Camera keys, fades, bubble emitters, and molecular cycles derive from the frame number and a seeded hash. There is no wall clock and no Math.random, so frame 612 renders identically in the browser, in the video export, and on every replay.

    One world, many scales

    Stack, cell, catalyst interface, and plant share one coordinate system. Zoom interpolates in log space about a fixed point, so macro-to-micro dives do not swing sideways. Detail fades in by zoom level, and line widths stay constant on screen.

    Canvas 2D, TypeScript, Vite

    No animation library and no 3D engine. Headless Chrome renders each frame at 1920×1080 and ffmpeg encodes the 1,020 frames to H.264 at 30 fps. The same code produces the hero image.

    Sources