From 15e099b67e0bd522dbb8c00ba0ae3ad8e486eeaf Mon Sep 17 00:00:00 2001 From: Himanshu Dongre Date: Thu, 21 May 2026 13:06:38 +0530 Subject: [PATCH] =?UTF-8?q?Recut=20the=20visual=20design=20=E2=80=94=20bra?= =?UTF-8?q?ided=20agent=20strands,=20refined=20palette?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This pass replaces the v2 visual language with a more handcrafted, signature-feeling system. Structure and copy are preserved; only the visual + interaction layer is reworked. Visual metaphor --------------- The dominant motif is a braid of two agent strands (claude-code in ember, codex in indigo) weaving over and under each other through hexagonal "checkpoint stones." The stones carry short hashes; the rightmost is "wet" — currently being written — and gets a soft ember pulse. Braiding has cultural weight (DNA, rope, river confluence) and reads as "structured intertwining," which is exactly what shared reasoning state is. The same motif scales down to a taut, stretched braid in the drift section. Palette ------- Refined to feel like a signature, not a template: - Deeper cool-black `#070710` background (warm accents pop harder against blue-black than against grey-black). - Ember `#ffb663` — warmer and more saturated than v2's `#f5c773`; campfire ember, not corporate gold. This is the Smriti color. - Indigo `#7c8cff` — saturated, fresh; not v2's washed `#8ba0c7`. - Aurora `#7be3b0` — third pole used sparingly for matches / done states, so the page isn't just ember + indigo. - Warm off-white paper `#e9e7e2` for body text. - Subtle SVG-noise grain overlay (5% opacity, overlay blend) gives the dark surface tooth. - Three hand-placed ember-glow anchor regions (hero, centerpiece, CTA) signal hierarchy — not decorative gradient blobs. Section redesigns ----------------- - Hero — braid + 5 hexagonal stones replacing v2's circle-and-line timeline. Subtle 14s sway on the strands. The rightmost (wet) stone glows and pulses. - Missing primitive — replaced the rigid 3-column-grid + connector gutter with a typographic glossary. Mapped rows get an ember dot; unmapped rows get an indigo dot and the "no equivalent" label. Reads like a hand-typeset comparison sheet, not a spreadsheet. - HANDOFF.md vs structured — both panels now have a lined-paper background. The HANDOFF panel has a `COLLISION` (red) badge; the checkpoint panel has a `RESOLVED` (aurora) badge. The conflict line types in, gets struck through, and the resolution types in underneath on scroll-in. - What Smriti is — checkpoint render becomes a parsed structured tree with labeled field/value pairs and intent/agent tag pills. - Multi-agent coordination (centerpiece) — completely rebuilt. Three columns: claude-code panel (left) | task pool (center) | codex panel (right). Tasks are "packets" that fly from the central pool into the side panels via JS-animated transforms, with springy easing. Each agent has a working stack that populates as packets land. Plays once on scroll-in, replayable. Bonus: clicking any unclaimed packet fires it manually to whichever agent has fewer claims. - Drift — repo timeline replaced with a tensile braid stretched between the checkpoint stone and the HEAD stone. On scroll-in, the HEAD stone nudges +14px right, gets the warning color, and the "+2 commits ahead" badge fades in. - Built with Smriti — terminal panel now has traffic-light dots, a blinking caret, and ember underline animation on "67 cross-agent continuations" on scroll-in. Numbers are semantically colored (ember = main, indigo = codex, aurora = success rates). - Try it — two terminals now sit on a very subtle skew axis (like an open laptop spread); hover snaps them straight. - Brand mark — replaced the dot-grid with a hexagonal stone and two woven strand-threads. Soft ember pulse every ~6s. Motion ------ Tasteful, per-section motion treatments rather than uniform fade-up. Slow braid sway on hero. Live-typing markdown collision. Springy packet flight. Drift stone nudge. CLI caret blink. Brand mark pulse. SVG path draw-in. Honors `prefers-reduced-motion: reduce` — all animations skip, every element lands in its terminal state, carets go static. Implementation -------------- Still pure HTML + CSS + ~330 lines of vanilla JS. No framework, no build step, no webfont, no third-party requests. IntersectionObserver thresholds tuned to 0.18 so animations fire reliably on mobile (tall stacked sections were below the previous 0.35–0.45 thresholds). Existing GitHub Pages workflow uploads ./website unchanged. Mobile responsive at 980 / 720 / 420 breakpoints. Theatre stacks vertically on mobile, packets still fly to the correct positions via computed bounding rects. Nav collapses to the GitHub CTA on small screens. --- website/index.html | 694 ++++++++------ website/script.js | 471 ++++++--- website/styles.css | 2289 +++++++++++++++++++++++++------------------- 3 files changed, 2077 insertions(+), 1377 deletions(-) diff --git a/website/index.html b/website/index.html index 8faf8ec..7f55b22 100644 --- a/website/index.html +++ b/website/index.html @@ -4,10 +4,10 @@ Smriti — Version control for project reasoning state - - + + - + @@ -18,20 +18,22 @@
- Smriti