From 172e74c791744d50cd4ddb1e353505987250aa31 Mon Sep 17 00:00:00 2001 From: saudzahirr Date: Mon, 17 Aug 2026 18:12:35 +0500 Subject: [PATCH 01/11] Replace the Game of Life field with a mark that draws itself MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The hero texture was a Conway automaton: pretty, but random, permanently in motion, and it never said anything about eggzec. astral.sh does the opposite behind its headline — the logo is one filled shape revealed through an alpha track matte of rounded bars whose widths grow from zero on staggered in-points, with trimmed strokes tracing in alongside. It plays once and resolves into the mark. This is that construction in eggzec's own geometry. The egg silhouette from brand/eggzec-mark.svg clips a stack of kiwi bars that grow out from the centre line and then swell to close the gaps; stepped violet traces run in from outside the frame and spark magenta where they land on the outline; the nine byte cells punch in last. Bar easing is read off the reference's own keyframes. It is one SVG plus CSS keyframes, delays driven by a --i index per element, so JS only builds markup and flips animation-play-state when the host scrolls in. No animation loop, no canvas, no per-frame work once it settles, and reduced motion gets the finished frame. Also drops the automaton references from the 404 copy and the README, and scopes positioning to the SVG rather than the host so the component works in an in-flow strip as well as an absolute panel. Co-Authored-By: Claude Opus 5 (1M context) --- 404.html | 6 +- README.md | 18 +- community/index.html | 4 +- index.html | 9 +- src/components/footer.ts | 4 +- src/components/life-field.ts | 422 ----------------------------------- src/components/mark-draw.ts | 248 ++++++++++++++++++++ src/main.ts | 4 +- src/styles/components.css | 176 ++++++++++++++- src/styles/layout.css | 8 +- src/styles/pages.css | 64 +++--- src/styles/tokens.css | 11 +- 12 files changed, 484 insertions(+), 490 deletions(-) delete mode 100644 src/components/life-field.ts create mode 100644 src/components/mark-draw.ts diff --git a/404.html b/404.html index a6032e8..2bdf548 100644 --- a/404.html +++ b/404.html @@ -17,9 +17,7 @@
- +

- This cell died out + Nothing to draw here

diff --git a/README.md b/README.md index f93ec6e..6da02d4 100644 --- a/README.md +++ b/README.md @@ -6,8 +6,8 @@ Live at **https://eggzec.github.io/**. A hand built static site: Vite and TypeScript, with no UI framework. Animation uses [Motion](https://motion.dev) plus -[Lenis](https://lenis.darkroom.engineering) for smooth scrolling, and a canvas -Game of Life for the hero texture. +[Lenis](https://lenis.darkroom.engineering) for smooth scrolling, and an SVG +build-on of the logo mark for the hero. ## Layout @@ -21,7 +21,7 @@ public/brand/ logo, project icons src/ main.ts single entry, mounts whatever a page contains data/site.ts projects and people. Edit content here - components/ nav, footer, cards, life field, reveals, marquee + components/ nav, footer, cards, mark draw, reveals, marquee lib/eggzec-block.ts the eggzec Block bitmap display font, as TypeScript styles/ tokens, base, layout, components, pages ``` @@ -68,7 +68,7 @@ Colours are the Electropop palette on white: | --- | --- | | Block fills, buttons, knockouts | Kiwi `#CCFF00` | | Accent text and links | Violet `#5200FF` | -| Sparks and newly born cells | Magenta `#F900FF` | +| Sparks and the byte cells | Magenta `#F900FF` | | Third accent | Orange `#FF6B00` | Kiwi is brilliant as a field with black on top of it and illegible as type on @@ -80,9 +80,13 @@ size, so there is no font file and no layout shift. Because the font is monospaced, the hero solves for letter tracking per line, which makes every line land at the same width and the same cap height. -The hero, footer and 404 page run Conway's Game of Life on a coarse grid. That -is the same glider hidden in the logo mark. Everything animated respects -`prefers-reduced-motion`. +The hero, the call to action panels, the footer rule and the 404 page draw the +logo mark rather than decorating around it. `src/components/mark-draw.ts` emits +one SVG: stepped violet traces run in from outside the frame and spark where +they meet the silhouette, a stack of kiwi bars grows out from the centre line to +fill the egg, the outline is traced, and the nine magenta byte cells land last. +It is CSS keyframes with a `--i` index per element, so it plays once, holds, and +costs nothing after that. Everything animated respects `prefers-reduced-motion`. ## Deploy diff --git a/community/index.html b/community/index.html index dac22cf..247eb65 100644 --- a/community/index.html +++ b/community/index.html @@ -37,9 +37,7 @@

- +

Want to join?

diff --git a/index.html b/index.html index 4ebf631..9335b0d 100644 --- a/index.html +++ b/index.html @@ -17,9 +17,7 @@

- +

@@ -222,9 +220,7 @@

Small group, long horizon

- +

Start with a repository

@@ -252,5 +248,6 @@

Start with a repository

+ diff --git a/src/components/footer.ts b/src/components/footer.ts index 273547a..cabed00 100644 --- a/src/components/footer.ts +++ b/src/components/footer.ts @@ -71,9 +71,7 @@ export function mountFooter(): void {
- +