How We Use Remotion — and How We Keep the Chemistry Accurate

ChemIllusion builds structure-drawing videos, reaction-path clips, and energy-diagram animations with Remotion. Here's why we chose a React composition engine — and how we keep molecules, mechanisms, and teaching claims honest.

When teachers ask for a short clip of a molecule being drawn, a reaction path walking from reactants to products, or an energy diagram that traces a marker along a curve, they are not asking for a generic “AI video.” They are asking for something they can put in front of a class without apologizing for wrong bonds, missing stereo, or a structure that drifted when the style changed.

ChemIllusion uses Remotion — video as React compositions — for those teaching animations. This post is a draft look at why that stack fits chemistry, what we render with it today, and the practices that keep the science ahead of the polish.

Why Remotion

Remotion lets us author motion the same way we author UI: components, props, and deterministic frame timing. That matters for chemistry because the hard part is not “make pixels move.” The hard part is keeping one validated structure (or reaction) stable while we change duration, aspect ratio, chalk vs model-kit styling, captions, and export format.

A prompt-only video model can invent atoms. A composition that receives an already-parsed molecule, a reaction SMILES, or a reaction-coordinate spec can animate what we already trust — then export MP4 or GIF for slides, LMS pages, and social cutdowns.

What we animate

Today Remotion (and Remotion-backed pipelines) power:

  • Structure drawing animations — step-by-step draws of molecules for lessons, talks, and short explainers.
  • Reaction-path animations — reactants, products, arrows, labels, and paced steps for mechanism and synthesis walkthroughs.
  • Model-kit and styled renders — chalk, whiteboard, neon, and related chemistry-first looks without rewriting the underlying structure.
  • Reaction-coordinate motion — a marker along an energy curve with optional structure morphs between pinned minima, used from the generator tool and deck export paths.
  • Landing and lesson demos — multilingual marketing compositions where timing stays fixed and only locale copy changes.

The public overview lives at /video; the in-app entry point is the molecule video tool on the generator (open with video tool ready).

Chemistry first, style second

Our rule of thumb: parse and validate chemistry before any frame is painted. SMILES, reaction SMILES, and Ketcher canvas structures go through chemistry-aware paths — not a text box that merely “looks like” a molecule. Reaction-path workflows keep chemical structures separate from visual styling, so changing chalk vs neon does not rewrite the molecule.

That separation is also how we teach accurately under time pressure. Instructors can iterate on pacing, captions, and aspect ratio for a Monday lecture without reopening the question of whether the carbons are still correct.

Bond geometry that stays readable

When we hand-author molecule SVGs inside Remotion compositions, we treat atom centers as the source of truth for bond endpoints. Bonds draw behind labels; labels sit on top with centered anchors. Bonds to explicit groups (CH₃, OH, and the rest) aim at the atom center, not the edge of a text box. Double bonds stay symmetric around the centerline. Those details sound fussy until a classroom projector turns a sloppy bond into a wrong functional group.

You stay in the review loop

Remotion gives us deterministic frames; it does not replace judgment. ChemIllusion keeps teachers and students in the loop: preview, revise, annotate, report errors, regenerate, and adjust captions so the final clip matches the teaching intent. We would rather ship a clear “check this frame” moment than a glossy animation that quietly teaches the wrong mechanism.

The same philosophy shows up in decks: short animations and GIFs are embedded where the topic warrants them, with static poster fallbacks and speaker-note accessibility text when those tools are selected — so motion supports the lesson instead of replacing it.

Where to try it

Remotion is the motion layer. Accurate chemistry is the contract. If those ever conflict, the chemistry wins — and the composition waits until the structure is right.