mitosis-lab/index.html at main · ctkrug/mitosis-lab · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
<!DOCTYPE html>
<html lang="en" data-theme="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mitosis Lab — watch a cell lineage grow</title>
    <meta
      name="description"
      content="An interactive cell-lineage simulator. Tune mutation rate and division timing and watch a lineage tree branch and grow in real time."
    />
    <!-- Social preview. Canonical / og:image / og:url are injected at publish. -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Mitosis Lab — watch one cell branch into a lineage" />
    <meta
      property="og:description"
      content="Press play on a single cell and watch a stochastic lineage tree bloom in real time. Tune mutation rate, division timing, and jitter."
    />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Mitosis Lab — watch one cell branch into a lineage" />
    <meta
      name="twitter:description"
      content="An interactive cell-lineage simulator: tune the biology, watch a living lineage tree branch and grow."
    />
    <!-- Favicon: dividing-cell glyph in GFP green on specimen black, generated in code. -->
    <link
      rel="icon"
      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%23081310'/%3E%3Ccircle cx='12' cy='16' r='6.5' fill='none' stroke='%2339f5a8' stroke-width='2.4'/%3E%3Ccircle cx='21' cy='16' r='6.5' fill='none' stroke='%23ff5db1' stroke-width='2.4'/%3E%3C/svg%3E"
    />
    <link
      rel="preconnect"
      href="https://fonts.googleapis.com"
    />
    <link
      rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap"
    />
    <link rel="stylesheet" href="./src/app/styles.css" />
  </head>
  <body>
    <main id="app" aria-label="Mitosis Lab">
      <canvas id="stage" aria-label="Live cell-lineage tree"></canvas>

      <header class="masthead">
        <a class="wordmark" href="./" aria-label="Mitosis Lab home">
          <span class="wordmark-text">MIT</span>
          <svg
            class="wordmark-o"
            viewBox="0 0 40 24"
            aria-hidden="true"
            focusable="false"
          >
            <circle class="ring ring-gfp" cx="15" cy="12" r="9" />
            <circle class="ring ring-mcherry" cx="25" cy="12" r="9" />
          </svg>
          <span class="wordmark-text">SIS LAB</span>
        </a>
      </header>

      <section class="hud" aria-label="Run readouts">
        <div class="hud-stat">
          <span class="hud-label">Population</span>
          <span class="hud-value" data-stat="population">0</span>
        </div>
        <div class="hud-stat">
          <span class="hud-label">Generation</span>
          <span class="hud-value" data-stat="generation">0</span>
        </div>
        <div class="hud-stat">
          <span class="hud-label">Divisions</span>
          <span class="hud-value" data-stat="divisions">0</span>
        </div>
        <div class="hud-stat">
          <span class="hud-label">Mutations</span>
          <span class="hud-value" data-stat="mutations">0</span>
        </div>
        <p class="hud-live" data-live role="status" aria-live="polite"></p>
      </section>

      <section class="rail" aria-label="Biology and playback controls">
        <div class="rail-group" role="group" aria-label="Biology parameters">
          <label class="ctl">
            <span class="ctl-row">
              <span>Mutation rate</span>
              <span class="ctl-value" data-value="mutation">0.25</span>
            </span>
            <input
              type="range"
              id="ctl-mutation"
              min="0"
              max="1"
              step="0.01"
              value="0.25"
            />
          </label>
          <label class="ctl">
            <span class="ctl-row">
              <span>Division interval</span>
              <span class="ctl-value" data-value="interval">2.2s</span>
            </span>
            <input
              type="range"
              id="ctl-interval"
              min="0.3"
              max="8"
              step="0.1"
              value="2.2"
            />
          </label>
          <label class="ctl">
            <span class="ctl-row">
              <span>Timing jitter</span>
              <span class="ctl-value" data-value="jitter">0.35</span>
            </span>
            <input
              type="range"
              id="ctl-jitter"
              min="0"
              max="1"
              step="0.01"
              value="0.35"
            />
          </label>
          <label class="ctl">
            <span class="ctl-row">
              <span>Max population</span>
              <span class="ctl-value" data-value="population">512</span>
            </span>
            <input
              type="range"
              id="ctl-population"
              min="8"
              max="1024"
              step="8"
              value="512"
            />
          </label>
        </div>

        <div class="transport" role="group" aria-label="Playback">
          <button type="button" id="btn-play" aria-label="Pause">
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <rect x="6" y="5" width="4" height="14" rx="1" />
              <rect x="14" y="5" width="4" height="14" rx="1" />
            </svg>
          </button>
          <button type="button" id="btn-step" aria-label="Step one division cycle">
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <path d="M6 5l10 7-10 7z" />
              <rect x="17" y="5" width="2.5" height="14" rx="1" />
            </svg>
          </button>
          <button type="button" id="btn-reset" aria-label="Reset run">
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <path
                d="M12 5V2L7 6l5 4V7a5 5 0 1 1-5 5H5a7 7 0 1 0 7-7z"
              />
            </svg>
          </button>
          <label class="ctl ctl-speed">
            <span class="ctl-row">
              <span>Speed</span>
              <span class="ctl-value" data-value="speed">1×</span>
            </span>
            <input
              type="range"
              id="ctl-speed"
              min="0.25"
              max="8"
              step="0.25"
              value="1"
            />
          </label>
          <button type="button" id="btn-mute" aria-label="Mute sound" aria-pressed="false">
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <path d="M4 9v6h4l5 4V5L8 9H4z" />
              <path class="mute-x" d="M16 9l5 6M21 9l-5 6" />
            </svg>
          </button>
        </div>

        <div class="seed-row" role="group" aria-label="Seed and sharing">
          <label class="ctl ctl-seed">
            <span class="ctl-row"><span>Seed</span></span>
            <input type="text" id="ctl-seed" value="mitosis" spellcheck="false" />
          </label>
          <button type="button" id="btn-share">Share run</button>
        </div>
      </section>

      <div class="bloom" data-bloom hidden role="dialog" aria-modal="true" aria-labelledby="bloom-title">
        <div class="bloom-card">
          <p class="bloom-title" id="bloom-title">Colony saturated</p>
          <dl class="bloom-stats">
            <div><dt>Population</dt><dd data-bloom-stat="population"></dd></div>
            <div><dt>Generations</dt><dd data-bloom-stat="generation"></dd></div>
            <div><dt>Divisions</dt><dd data-bloom-stat="divisions"></dd></div>
            <div><dt>Mutations</dt><dd data-bloom-stat="mutations"></dd></div>
            <div><dt>Seed</dt><dd data-bloom-stat="seed"></dd></div>
          </dl>
          <div class="bloom-actions">
            <button type="button" id="btn-bloom-share">Share this run</button>
            <button type="button" id="btn-bloom-new">New seed</button>
          </div>
        </div>
      </div>
    </main>

    <!-- Below-the-fold: search-intent copy + FAQ, styled to match the app.
         The stage above fills the first viewport; this scrolls into view. -->
    <section class="about" aria-label="About Mitosis Lab">
      <div class="about-inner">
        <h2>What Mitosis Lab is</h2>
        <p>
          Mitosis Lab is a free, browser-based cell-lineage simulator. It starts
          with one cell and lets you watch it divide, again and again, into a
          branching family tree. Each division is stochastic, drawn from a mean
          interval with jitter, and each daughter inherits a slightly mutated
          copy of its mother's traits. The colony that grows is a genealogy you
          can read: colour marks a sub-lineage, and distance from the centre
          marks a generation. It is built for biology students, educators, and
          anyone who likes a living system to poke at, and it runs entirely in
          your browser with nothing to install.
        </p>

        <h3>How to use it</h3>
        <ol class="about-steps">
          <li>Press play to start the founding cell dividing.</li>
          <li>
            Drag mutation rate up to watch sub-lineages fan out into new
            colours, or down to hold a single hue.
          </li>
          <li>
            Change the division interval and jitter to move between a slow,
            synchronised colony and a fast, staggered one.
          </li>
          <li>
            Set a seed and share the URL. The seed and every parameter travel in
            the link, so whoever opens it sees the exact same run.
          </li>
          <li>
            Let the population reach its cap to trigger the colony-saturated
            summary, then reseed for a fresh tree.
          </li>
        </ol>

        <h3>FAQ</h3>
        <dl class="faq">
          <dt>What is a cell-lineage tree?</dt>
          <dd>
            It is the branching diagram biologists use to trace which cell came
            from which. The root is the founding cell; every fork is one
            division into two daughters. Mitosis Lab draws that tree live as the
            colony grows.
          </dd>

          <dt>Is the simulation scientifically accurate?</dt>
          <dd>
            It is a teaching model, not a research tool. It captures two real
            ideas faithfully: division timing is stochastic rather than
            clockwork, and traits are inherited with drift. It does not model a
            specific organism, cell-cycle checkpoints, or cell death.
          </dd>

          <dt>What do the colours mean?</dt>
          <dd>
            Colour is an inherited trait that drifts when a mutation fires. A
            branch that shifts from green toward cyan or magenta marks a
            sub-lineage carrying that mutation, so you can trace a mutation back
            to the cell where it started.
          </dd>

          <dt>Why is every run reproducible?</dt>
          <dd>
            The whole simulation is a pure function of its seed and parameters,
            driven by a seeded PRNG and a fixed timestep. The same seed and knobs
            always produce the same tree, at any frame rate, which is why a
            shared link recreates a run exactly.
          </dd>

          <dt>Does it work on a phone?</dt>
          <dd>
            Yes. The stage fills the top of the screen and the controls become a
            bottom sheet, with touch targets sized for a thumb.
          </dd>
        </dl>

        <div class="about-cta">
          <a
            class="about-btn"
            href="https://github.com/ctkrug/mitosis-lab"
            target="_blank"
            rel="noopener noreferrer"
            >View source on GitHub</a
          >
        </div>

        <p class="about-more">
          More by Charlie Krug →
          <a href="https://apps.charliekrug.com" target="_blank" rel="noopener noreferrer"
            >apps.charliekrug.com</a
          >
        </p>
      </div>
    </section>

    <script type="module" src="./src/app/main.ts"></script>
  </body>
</html>