Sea of Grass
Source for seaofgrass.studio.
Hand-coded static site — no build step, no dependencies. Open a file in a browser and
you are looking at the real thing.
Structure
index.html landing page: the mark, and the index of studies
studies/
scrollwork/index.html Study 01 — self-contained, ~10 KB
front-door/index.html Study 02 — self-contained, ~29 KB
looking-glass/ Study 03 — page + 2 modules + 3.8 MB of models
packfold/ Study 04 — notes, the toy it embeds, and a sample .dxf
beacon/index.html Study 05 — self-contained, ~1 MB (inline vector buildings)
grasset/ Study 06 — page + painted fallbacks + 3 models, 2.9 MB; three.js from a CDN
touch-grass/index.html Study 07 (was Windrow) — self-contained, ~13 KB; MediaPipe and its hand model from CDNs
windrow/index.html the old address; sends you on to touch-grass/
murmuration/ Study 08 — prose page + 4 captured frames, ~230 KB
dark-puddle/index.html Study 09 — self-contained, ~25 KB, WebGL2; optional site pictures from Microlink
fever/ Study 10 — self-contained, ~80 KB, WebGL2; three.js from a CDN
make-up/index.html Study 11 — self-contained, ~150 KB, WebGL2; Fever's street for colour; three.js from a CDN
stutter/index.html Study 12 — self-contained, ~60 KB, WebGL2; Fever's street for time; three.js from a CDN
afterglow/index.html Study 13 — self-contained, ~28 KB, WebGL2; a ball for each hand; MediaPipe from CDNs
talaria/index.html download page for Talaria, the studio's task app (unlisted)
404.html not-found page; also sends /Talaria/ etc. to /talaria/
assets/
logo.svg the mark, fill="currentColor" (inherits type color)
favicon.svg same mark, explicit fill, a little padding
CNAME binds the custom domain — do not delete
.nojekyll serve files as-is, no Jekyll processing
Local preview
Absolute paths (/assets/…, /studies/…) need a server root, so serve the folder
rather than opening index.html off the filesystem:
python3 -m http.server 8000
Deploying
Push to main — GitHub Pages rebuilds automatically. There is nothing else to run.
The domain is not served from Hostinger, even though a copy of an older
index.html still sits in a Hostinger document root for seaofgrass.studio. That
copy serves no traffic. DNS points at GitHub Pages (185.199.108–111.153).
How a study works
Each study is a self-contained directory — usually just one HTML file with its CSS
and JS inline, no shared stylesheet, no framework. A study that genuinely needs data
(a mesh, a model file, ES modules) keeps it alongside its page rather than reaching
into a shared folder. The constraint is that a study never depends on another study,
and never on a build step.
Study 03 is the first to need more than one file, and the first with an external
runtime dependency (MediaPipe, from a CDN). Both are real costs against "should still
run in ten years" — worth paying here, worth noticing when it happens again.
Shared conventions across the site, rather than shared code. These are the default,
not a uniform — a study that is a designed world of its own may set its own palette
(Study 03 is amber-on-black, and converting it to paper would destroy it). What no
study skips: the mark linking home, and crediting any adapted technique on the page.
| |
|---|
| Paper | #faf9f6 |
| Ink | #141311 |
| Hairline | #d9d6cf |
| Ink, soft | rgba(20,19,17,.5) |
| Type | IBM Plex Mono, 400 / 500 |
A study that is mostly prose may set running text in IBM Plex Sans — same
superfamily, so it reads as the system growing rather than a second look. Mono still
sets every label, table, code span and number. Studies that are mostly picture stay in
mono throughout, like Scrollwork.
Labels are uppercase, letter-spacing: .14em, 13px. Numbers use
font-variant-numeric: tabular-nums.
Where a study adapts someone else's technique, it credits the source on the face of
the page, not in a comment. Scrollwork does this and it should stay the rule.
Adding a study
studies/<name>/index.html, plus any data it needs, in that directory.- Link the mark back to
/ in the top-left, so the study is never a dead end.
Use a root-relative /, not ../ — ../ resolves to /studies/, which has no page.
- Add a row to the
<ol> in the root index.html and bump the count in
.studies-head.
- If it asks for a camera, microphone or location, say on the page what happens to
the data, and make sure the code actually matches the claim.
Working together
main is protected. No direct pushes, no force pushes, no deleting the branch — which
means nothing committed here can be destroyed, only added to or reverted. That applies
to both of us equally.
git pull
git checkout -b what-youre-building
# ...work...
git push -u origin what-youre-building
gh pr create --fill && gh pr merge --squash
No approval is required — merge your own when you're happy with it. Merging deploys
immediately, so the pull request is a moment to read the diff, not a gate you need the
other person to open.
Studies belong to whoever makes them. Don't edit someone else's studies/<name>/
directory. Branch protection prevents the catastrophic case; staying out of each other's
files is what prevents the daily friction. The only genuinely shared surface is the
<ol> in the root index.html — one row per study — and this README.
To undo something, git revert it. That reverses the change while keeping the record,
which is the opposite of git reset --hard on a shared branch.
Who
Tristan Brewer and Bryce Nielsen. Founded September 2025.
