Commit graph

3 commits

Author SHA1 Message Date
Himanshu Dongre
15e099b67e Recut the visual design — braided agent strands, refined palette
Some checks failed
Deploy website to GitHub Pages / deploy (push) Has been cancelled
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.
2026-05-21 13:06:38 +05:30
Himanshu Dongre
b0bc283441 Redesign the landing page as a structured, visualized front door
Some checks are pending
Deploy website to GitHub Pages / deploy (push) Waiting to run
Replace the v1 static documentation page with a product-grade redesign
that shows what Smriti is rather than describing it.

Sections, top to bottom:
- Hero with an ambient two-agent-timeline diagram threaded through
  shared checkpoints. Single primary action.
- "The missing primitive" — Git and Smriti primitives mapped row-by-row
  with horizontal connectors, plus three Smriti rows with no Git analog.
- "Why HANDOFF.md isn't enough" — side-by-side panels: a markdown file
  with a stale-state collision next to a structured checkpoint that
  preserves decisions, task IDs, claims, and repo_state.
- "What Smriti is" — three lines of copy alongside a real-shaped
  checkpoint card with labeled structured fields.
- Centerpiece: a "protocol theatre" that animates two agents reading
  the same task pool, claiming complementary work, and routing around
  each other's claims. 5-step scripted animation, plays once on
  scroll-into-view, replayable.
- "Drift & trust" — repo-timeline SVG plus an excerpt of the
  ## Repo state section the agent reads at session start.
- "Built with Smriti" — mock CLI panel of `smriti metrics smriti-dev`
  with the current real numbers (129 checkpoints, 79+50 per agent,
  67 cross-agent continuations, 87 claims at 97% completion,
  7 milestones).
- "Try it in minutes" — two-terminal install + run blocks, links out
  to the README for the full setup ladder.
- CTA + footer.

Implementation: vanilla HTML + CSS + ~140 lines of vanilla JS. No
framework, no build step, no webfont, no third-party requests. The
existing Pages workflow keeps uploading ./website as-is. JS does two
things: IntersectionObserver-based reveal-on-scroll for sections, and
a stepwise controller for the protocol theatre. Honors
prefers-reduced-motion (animations skip, diagrams land in their final
state).

Design tokens extend the v1 dark + warm-gold palette with a second
cool indigo for state/coordination signals, plus motion + layout
tokens. Mobile responsive at 920px / 720px / 420px breakpoints. Nav
collapses to the GitHub CTA on small screens.

Remove three unused screenshot PNGs (~1MB) from website/assets/ —
v2 visualizes structures inline instead of showing wallpaper images.
The originals remain in docs/assets/ for the README.
2026-05-21 02:53:47 +05:30
Himanshu Dongre
47d5bb0269 Add the first public landing page at website/
A self-contained static landing page — pure HTML + CSS, no JS framework,
no build step — lifting the README's positioning into a single
scrollable page a new visitor can read in about two minutes.

Sections, in order:
- Hero: "Code has Git. Multi-agent reasoning does not." + the
  version-control-for-reasoning-state framing + two CTAs.
- The problem: multi-agent collisions; markdown handoffs break.
- The Git analogy: the table from the README (commit -> checkpoint,
  branch -> fork, diff -> compare, revert -> restore, working-tree
  drift -> repo-state drift) plus the rows Git has no equivalent for
  (active claims, freshness checks, structured tasks + IDs).
- How it works: 4-beat (attach, read state, claim, checkpoint) plus
  the no-arg daily-loop snippet.
- What Smriti is not: not markdown, not memory, not orchestrator; and
  the concrete list of what markdown can't reliably provide.
- Built with Smriti: the real `smriti metrics smriti-dev` numbers and
  the strongest-proof line.
- Screenshots: dashboard, CLI, checkpoint detail (copied from
  docs/assets/ into website/assets/ so the site is self-contained).
- Try it in 5 minutes: install local-first -> smriti doctor -> smriti
  quickstart -> smriti init/attach -> no-arg daily workflow.
- CTA: star on GitHub + read the docs.

Tech: a system font stack (no webfonts), CSS variables, dark theme with
one warm accent, mobile-responsive at <=720px and <=420px. No JS. 230
lines HTML + 499 lines CSS + 3 screenshots + a .nojekyll marker.

Self-contained under website/. Existing frontend/ chat UI untouched.
Deployment is unconstrained — GitHub Pages from /website, Vercel,
Netlify, or any static host.

Verified locally via headless browser: page loads, no console errors,
no network failures, renders cleanly at desktop (1280x800) and mobile
(390x844) viewports.
2026-05-20 21:22:51 +05:30