All Animations

Kinesin-1 walking along a microtubule. The two-headed motor protein takes 8 nm steps, hydrolysing one ATP per step. Animation shows the hand-over-hand gait, cargo binding domain, and the stochastic detachment probability that limits run length.

Canvas 2D · step geometry · ATP hydrolysis cycle · processivity counter

Hero canvas with two layers: floating A/T/G/C base letters drifting upward with random drift, fading at the top; double helix drawn as two sine-offset spiral arms with connecting base-pair rungs. Rung color varies by base type (A=cyan, T=blue, G=green, C=gold). Helix rotates slowly on a vertical axis via phase offset increment. Goldilocks slider tracks base-pair fidelity.

Canvas 2D · particle system · sinusoidal helix geometry · base-pair rung rendering · Goldilocks

Hero canvas showing a chromatin fiber as a chain of nucleosomes. Methylation marks (CpG methyl groups) appear and disappear stochastically — marks pulse with a glow when active. Overall methylation density reflects the Goldilocks slider for CpG methylation %. Demonstrates the second layer of genetic information beyond DNA sequence.

Canvas 2D · stochastic mark toggling · nucleosome chain geometry · pulse glow · Goldilocks

Hero canvas: nucleosome octamers (protein spools) with DNA wrapped around them. Histone tail modifications cycle in sync with the Goldilocks acetylation slider — acetylation = open chromatin (expanded spacing); methylation = compact (tight spacing). Tails extend and retract with easing. Demonstrates a chemical language written on top of the genetic language.

Canvas 2D · nucleosome geometry · histone tail easing · chromatin compaction states · Goldilocks

Hero canvas: a DNA strand scrolls horizontally. CpG dinucleotides are highlighted as nodes. DNMT writer enzymes (moving particles) attach methyl group caps; TET eraser enzymes remove them. The ratio of writers to erasers is driven by the TET demethylation Goldilocks slider. Demonstrates the reversible chemical marking system that controls which genes are expressed.

Canvas 2D · scrolling strand · enzyme particles · methyl cap attach/remove · Goldilocks

Hero canvas: cell membrane shown as a horizontal phospholipid bilayer. Above it, glycoprotein and glycolipid chains extend upward as branching tree structures, swaying gently with sinusoidal oscillation per-chain phase offset. Chain density and height respond to the Goldilocks chain length slider. A third language of cellular identity, written in branching sugar polymers.

Canvas 2D · branching tree geometry · sinusoidal sway · phase-offset per chain · Goldilocks

Hero canvas: network of nodes (mRNA targets) connected by edges (miRNA interactions). Nodes glow and pulse; edges draw and fade based on connection strength driven by the seed match length Goldilocks slider. Active nodes show translational suppression via color shift. Network layout uses fixed positions with spring-like oscillation.

Canvas 2D · force-layout simulation · node pulse · edge fade · network topology · Goldilocks

Hero canvas: RNA strand as a chain of nucleotide beads that folds and unfolds cyclically — forming stem-loop hairpin structures (catalytic active conformation) then unfolding back to linear. Fold progress driven by a sinusoidal cycle. Active conformation glows at the catalytic center. Demonstrates why RNA cannot solve its own origin problem.

Canvas 2D · bead-spring chain · hairpin fold geometry · catalytic glow pulse · Goldilocks

Hero canvas: DNA double helix with rungs that stochastically turn red (mutation event) then repair back to correct color. Mutation rate controlled by the μ Goldilocks slider. At high mutation rates the helix becomes predominantly red — error catastrophe visualised. Eigen's Q = (1−μ)^L computed live and displayed in the score panel.

Canvas 2D · stochastic rung mutation · helix geometry · Q-score live computation · Goldilocks

Hero canvas: hierarchical gene regulatory network with master transcription factors at top, activating downstream target genes in a cascade. Activation flows downward as a travelling pulse along edges. Network branches from 1 master TF → 3 modules → 9 terminal states. Cascade timing driven by propagation delay linked to the GRN complexity Goldilocks slider.

Canvas 2D · directed acyclic graph · pulse propagation · cascade timing · Goldilocks

Two-canvas system. Hero canvas: bead-spring polypeptide chain cycling through folded/unfolded states via foldProgress variable. Secondary canvas: energy landscape folding funnel — a 3D funnel drawn in 2D projection that widens/roughens based on score, with native-state dot glowing at the bottom. Funnel redraws via window._drawFunnel(score) called by sliders.

Canvas 2D · bead-spring chain · funnel projection geometry · _drawFunnel() API · Goldilocks

Hero canvas: particle field representing kinase/phosphatase populations. Particles randomly activate and spread activation to neighbors within a radius, simulating a signaling cascade. At balanced kinase:phosphatase ratio (1:1), activation spreads then resolves. At extreme ratios, either no signal propagates or runaway activation fills the field — the Goldilocks precision of cellular signaling.

Canvas 2D · particle activation spread · neighbor-radius cascade · kinase:phosphatase ratio · Goldilocks

Article hero canvas: animated DNA double helix with base pair rungs and floating base letters. IntersectionObserver-controlled — only animates when in viewport. Tab-visibility aware via _tabVisible flag.

Canvas 2D · IntersectionObserver · prefers-reduced-motion · tab-visibility API

Two RAF loops: population fitness landscape showing allele frequency changes under selection; speciation event visualization. Uses animId handle for pause/resume.

Canvas 2D · population genetics simulation · allele frequency · fitness landscape

Three independent canvas loops on one page, each IntersectionObserver-triggered: DNA helix hero; ATP motor animation; cosmological fine-tuning visualization — particle universe expanding from a point with fine-tuning parameter overlay.

Canvas 2D · 3 independent loops · IntersectionObserver · tab-visibility guard · prefers-reduced-motion

Two canvas loops: primary DNA helix animation and a secondary canvas showing a base-pair codon table with animated highlighting as codons are read by a ribosome cursor. Companion to NOW · I.

Canvas 2D · codon table rendering · ribosome cursor animation · dual loops