Mind Field
Interactive guides to how anxiety, OCD, PTSD, bipolar disorder, psychosis, and eating disorders work, what keeps them going, and what helps. Each page pairs its text with a Three.js particle field that changes shape to match the content.
Pages
| Page | File | Notes |
|---|
| Home | site/index.html | Hub page; the field morphs to each topic's shape on hover. |
| Anxiety | site/anxiety.html | Includes a 4-4-6-2 guided breath pacer. |
| OCD | site/ocd.html | Ink-on-paper style with engraved line work. |
| PTSD | site/ptsd.html | Hand-built page; moves from night to dawn as you scroll; hold-to-ground interaction. |
| Bipolar I and II | site/bipolar.html | Circadian and down-shift pacers. |
| Psychosis | site/psychosis.html | 5-4-3-2-1 grounding and vagus pacers. |
| Eating disorders | site/eating.html | Abstract forms only; no bodies, food, or numbers. |
| A Mind That Found Itself, Chapter I | site/beers.html | Trial page for Clifford Beers's 1908 book (public domain); not yet linked from the home page. |
View it locally
The pages link to each other, so serve the site folder over HTTP rather than opening the files directly. Opened as plain files, links between pages may not work.
python -m http.server 8770 --directory site
Then open http://localhost:8770 in a browser.
The pages load Three.js from the jsDelivr CDN and fonts from Google Fonts, so an internet connection is needed.
Build
The topic pages are generated. Run this from the repository root (needs Node.js):
node build.mjs
It writes all pages into site/. To build one page, pass its folder name. For example: node build.mjs ocd.
Project layout
- engine.js: shared particle engine (scroll-driven scenes, hover targets, pacers, line layer).
- template.html: page shell and shared CSS for generated pages.
- lib.mjs: HTML helpers used by the content files.
- sites//content.mjs: a topic's text, palette, fonts, and pacer settings.
- sites//scenes.js: a topic's particle scenes, one per chapter.
- custom/: hand-built pages (index.html hub, ptsd.html) and the shared footer CSS.
- build.mjs: builds everything into site/.
- shoot.py: optional Playwright screenshot script for checking pages (needs a local server on port 8770 and the playwright Python package).
Adding a topic
- Create sites// with content.mjs and scenes.js. The number of scenes must equal the number of chapters.
- Add the topic to the TOPICS list in build.mjs so it appears on the home page and in footers.
- Run node build.mjs and check the page over a local server.
Content and safety
- The pages are educational and are not a diagnosis tool or a substitute for care from a qualified professional.
- Clinical content was adapted from the original microsite source files and has not been reviewed by a clinician.
- Crisis lines shown on some pages (988 in the USA and Canada, 741741 Crisis Text Line, 111 in the UK, 13 11 14 in Australia) should be checked before publishing.
- Calm motion reduces animation and is on by default when the system asks for reduced motion.
