2 commits

Author	SHA1	Message	Date
Himanshu Dongre	15e099b67e	Recut the visual design — braided agent strands, refined palette ... 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 ... 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