Skip to content

Commit f522870

Browse files
ccross2claude
ccross2
and
claude
committed
design: animated SVG hero glyphs, manifesto→codex rename, visual polish
Replace static low-opacity SVG line art with animated, glowing hero glyphs that fill the negative space above each product panel: - Sovren (home): convergence nexus with rotating hexagons, pulsing core - Esver OS: command terminal with blinking cursor, voice wave arcs - Visage: biometric face scan with sweeping scan line, glowing brackets - Mr. Haven: vault hexagon with rotating frames, glowing lock - Codex: open grimoire with pulsing trifecta and esper crystal Animation system (CSS-only, no JS deps): - Floating drift (8s ease-in-out) - Slow rotation (60s/45s counter-rotating hexagonal frames) - Pulsing glow on accent nodes (3s ease-in-out) - Cursor blink (1.2s step-end) - Scan sweep on Visage (4s vertical sweep) - All respect prefers-reduced-motion Visual enhancements: - SVG feGaussianBlur glow filters on accent elements - Dot-grid background pattern on body - Corner bracket decorations on panel--strong elements - Section rule decorator (// PRODUCTS label + line + marker) - Hero margin tick marks and coordinate annotations Rename: - "THE MANIFESTO" → "THE CODEX" (nav, footer, page title, hero, meta) - Category: "COMPANY" → "DOCTRINE" - All CTA buttons: "READ THE MANIFESTO" → "READ THE CODEX" - URL remains /ecosystem for backward compat Docs: update CLAUDE.md with design decisions (rationale, trade-offs, expected benefits, known limitations, component inventory). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 174d0ab commit f522870

File tree

13 files changed

+908
-46
lines changed

13 files changed

+908
-46
lines changed

‎CLAUDE.md‎

Lines changed: 52 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ All static files live in `static/` (NOT `public/` — SvelteKit convention). Cop
235235
**The x10 thesis lives on individual product pages.** "The infrastructure that multiplies what one person can do" belongs to Esver OS. The stack-level copy describes what the stack IS (three layers), not what any one layer does.
236236

237237
**Thesis hierarchy:**
238-
1. Stack level (Home, Ecosystem): sovereignty across OS + identity + finance
238+
1. Stack level (Home, Codex): sovereignty across OS + identity + finance
239239
2. Product level: each product surfaces the founder-as-proof / capability-multiplication angle
240240
3. Feature level: technical specifics, no thesis language needed
241241

@@ -262,9 +262,12 @@ All static files live in `static/` (NOT `public/` — SvelteKit convention). Cop
262262
### MrHaven
263263
- Status: Live on Base mainnet
264264

265-
### Ecosystem (Manifesto)
265+
### Codex (was Ecosystem/Manifesto)
266+
- Page title: "THE CODEX." (category: DOCTRINE)
267+
- Nav link text: "CODEX" (URL remains `/ecosystem`)
266268
- Blockquote styled with violet left border + accent-surface background
267269
- Closing H2: "ONE OPERATOR. TOTAL AUTHORITY."
270+
- Hero glyph: open grimoire with trifecta triangle + esper crystal
268271

269272
## Deploy Process
270273

@@ -296,14 +299,45 @@ npm run generate-og # rewrites static/og-image.png
296299

297300
Script is at `scripts/generate-og.js`. Run it after any brand or copy changes that should be reflected in social previews.
298301

299-
## Known Limitations
300-
301-
- No blog platform for the content launch strategy (teaser article, X thread)
302-
- `esver.computer` has no standalone landing page — product page lives at `sovren.software/esver`
303-
- MrHaven SDK not yet documented on the site (removed SDK mention from CTA until ready)
304-
- No visual that shows the three products converging (convergence story is text-only)
305-
- `augmentum.computer` → `esver.computer` DNS redirect not yet configured (Namecheap/Cloudflare)
306-
- Brevo welcome email template still references Augmentum OS in body text — update in Brevo dashboard
302+
## Design Decisions (2026-03-15 Redesign)
303+
304+
### Rationale
305+
The original site was pure monochrome (black/white) with a Three.js 3D wireframe background. The creative brief called for "schematic command design with restrained magitek undertones" — warm bone, panel-framed, sparse violet accents, technical dossier aesthetic. The 3D scene was heavy (~570 lines JS, Three.js + GSAP deps) and the monochrome palette felt generic. The redesign replaces runtime 3D with lightweight CSS/SVG artwork.
306+
307+
### Trade-offs
308+
- **Removed Three.js/GSAP** → lost the cinematic 3D parallax feel, gained ~200KB bundle reduction, eliminated GPU overhead, removed the transparent-background constraint that blocked opaque panel layouts
309+
- **Renamed "Manifesto" → "Codex"** → aligns with magitek/FF6 flavor, URL stays `/ecosystem` for backward compat (not renamed to avoid breaking indexed URLs)
310+
- **SVG glyphs over raster art** → infinitely scalable, theme-aware (uses CSS vars), tiny file size, but limited to geometric/schematic styles — no photographic or painted artwork
311+
- **CSS animations over JS** → zero bundle cost, respects `prefers-reduced-motion`, but limited to simple transforms (rotate, translate, opacity) — no physics or interaction
312+
- **Light-mode first** → dark mode tokens exist and work but haven't been visually QA'd against the new glyphs/panels in a real browser session
313+
314+
### Expected Benefits
315+
- Faster load (no Three.js/GSAP), better Lighthouse scores
316+
- Distinctive visual identity (the schematic magitek look is unique in the sovereign computing space)
317+
- Fully theme-aware artwork (glyphs use CSS vars, swap with dark mode)
318+
- Accessible (all animations respect reduced-motion, all glyphs have aria-hidden, all SVGs are decorative)
319+
320+
### Known Limitations
321+
- Dark mode not visually QA'd — tokens present, glyph opacities may need per-theme tuning
322+
- No blog platform for content launch strategy
323+
- `esver.computer` has no standalone landing page
324+
- MrHaven SDK not yet documented
325+
- OG image uses static bone palette — no dark mode variant
326+
- Glyph animations are CSS-only — no scroll-linked parallax or mouse interaction
327+
- `AsciiArt.svelte` and `EsperCrystal.svelte` are created but unused (superseded by HeroGlyph approach) — candidates for cleanup
328+
- Favicon SVG still uses old black design — should be updated to match new palette
329+
330+
### Component Inventory (new in redesign)
331+
| Component | Purpose | Status |
332+
|-----------|---------|--------|
333+
| `HeroGlyph.svelte` | Animated SVG line-art per product hero | Active, 5 variants |
334+
| `Icon.svelte` | 9 thin-line SVG icon glyphs | Active |
335+
| `StatusBar.svelte` | Bottom status bar | Active |
336+
| `StackDiagram.svelte` | Three-product convergence diagram | Active (homepage) |
337+
| `TrifectaDiagram.svelte` | UX/Privacy/Security triangle | Active (codex page) |
338+
| `reveal.js` | IntersectionObserver scroll reveal action | Active |
339+
| `AsciiArt.svelte` | ASCII text art blocks | Unused — superseded by HeroGlyph |
340+
| `EsperCrystal.svelte` | Crystal SVG decorative element | Unused — superseded by HeroGlyph |
307341

308342
## Backlog (external systems — not actionable from this repo)
309343

@@ -315,22 +349,17 @@ These require access to external dashboards, registrars, or depend on work that
315349
- MrHaven SDK section on the MrHaven page (blocked on SDK docs)
316350
- X profile update (currently MrHaven-branded)
317351
- Cloudflare Transform Rules for CDN-level security headers (see `SECURITY.md`)
352+
- Clean up unused components (AsciiArt.svelte, EsperCrystal.svelte)
353+
- Update favicon SVG to match new palette
354+
- Dark mode visual QA session (glyphs, panels, dot grid)
318355

319356
### Completed
357+
- [x] Animated SVG hero glyphs with glow + motion (2026-03-15)
358+
- [x] Rename "Manifesto" → "Codex" across nav, footer, pages, meta tags (2026-03-15)
320359
- [x] Schematic magitek editorial redesign — full visual system rewrite (2026-03-15)
321360
- [x] Three.js + GSAP removed, panel/tag system added, violet accent (2026-03-15)
322-
- [x] StatusBar component, Nav restyled (2026-03-15)
323-
- [x] SVG diagrams: StackDiagram + TrifectaDiagram (2026-03-15)
324-
- [x] Line-based icon/glyph system: Icon.svelte with 9 glyphs (2026-03-15)
325-
- [x] Dark mode polish: refined token tuning (2026-03-15)
326-
- [x] Motion system: reveal.js + CSS scroll reveals (2026-03-15)
327-
- [x] OG image regenerated with schematic magitek palette (2026-03-15)
328-
- [x] Visual convergence diagram on homepage (2026-03-15)
329-
- [x] manifest.webmanifest theme-color updated (2026-03-15)
330-
- [x] Favicon suite, Web app manifest, OG image (2026-02-26)
331-
- [x] Open Graph + Twitter Card + Canonical URLs on all pages (2026-02-26)
332-
- [x] Security headers, skip-nav, aria-labels, prefers-reduced-motion (2026-02-26)
333-
- [x] ESLint + Prettier + svelte-check, CI pipeline, Dependabot (2026-02-26)
334-
- [x] LICENSE, CHANGELOG, SECURITY.md (2026-02-26)
361+
- [x] StatusBar, Nav restyle, dot-grid bg, corner brackets, section rules (2026-03-15)
362+
- [x] SVG diagrams, icon system, dark mode polish, motion system, OG image (2026-03-15)
363+
- [x] Favicon suite, OG tags, security headers, a11y, CI pipeline (2026-02-26)
335364
- [x] Light/dark theme toggle with persistence (2026-02-25)
336365
- [x] Waitlist capture on Esver OS page (2026-02-24)

‎src/app.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,9 @@ html {
157157

158158
body {
159159
background: var(--bg);
160+
background-image:
161+
radial-gradient(circle, var(--text-ghost) 0.5px, transparent 0.5px);
162+
background-size: 24px 24px;
160163
color: var(--text-primary);
161164
font-family: var(--font-mono);
162165
-webkit-font-smoothing: antialiased;
@@ -206,10 +209,36 @@ a {
206209
.panel {
207210
border: var(--panel-border);
208211
padding: var(--panel-pad);
212+
position: relative;
209213
}
210214

211215
.panel--strong {
212216
border: var(--panel-border-strong);
217+
position: relative;
218+
}
219+
220+
/* Corner brackets on strong panels */
221+
.panel--strong::before,
222+
.panel--strong::after {
223+
content: '';
224+
position: absolute;
225+
width: 12px;
226+
height: 12px;
227+
border-color: var(--accent);
228+
border-style: solid;
229+
opacity: 0.4;
230+
}
231+
232+
.panel--strong::before {
233+
top: -1px;
234+
left: -1px;
235+
border-width: 2px 0 0 2px;
236+
}
237+
238+
.panel--strong::after {
239+
bottom: -1px;
240+
right: -1px;
241+
border-width: 0 2px 2px 0;
213242
}
214243

215244
.panel--alt {

‎src/lib/AsciiArt.svelte‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!--
2+
ASCII art blocks for product hero sections.
3+
Each product gets a unique schematic readout.
4+
Usage: <AsciiArt id="esver" />
5+
-->
6+
<script>
7+
/** @type {string} */
8+
export let id;
9+
</script>
10+
11+
<div class="ascii-wrap">
12+
{#if id === 'sovren'}
13+
<pre class="ascii" aria-hidden="true">{`
14+
╔════════════════════════════════════╗
15+
║ ◆ SOVREN_CORE ◆ ║
16+
╠════════════════════════════════════╣
17+
║ ║
18+
║ ┌──────────┐ ┌──────────┐ ║
19+
║ │ COMPUTE │────│ IDENTITY │ ║
20+
║ │ esver.os │ │ visage │ ║
21+
║ └────┬─────┘ └────┬─────┘ ║
22+
║ └──────◆───────┘ ║
23+
║ │ ║
24+
║ ┌─────┴──────┐ ║
25+
║ │ CAPITAL │ ║
26+
║ │ mr.haven │ ║
27+
║ └────────────┘ ║
28+
║ ║
29+
║ SIGNAL_STATUS: ████████░░ 82% ║
30+
║ AETHERIC_FLUX: NOMINAL ║
31+
╚════════════════════════════════════╝
32+
`}</pre>
33+
{:else if id === 'esver'}
34+
<pre class="ascii" aria-hidden="true">{`
35+
┌─────────────────────────────┐
36+
│ > SYSTEM_INIT │
37+
│ > VOICE_ENGINE: ████ LIVE │
38+
│ > BIOMETRIC_GATE: LOCKED │
39+
│ > AI_COPILOT: STANDBY │
40+
│ > AUTHORITY: OPERATOR │
41+
│ > TELEMETRY: NONE │
42+
│ │
43+
│ ┌────────────────────────┐ │
44+
│ │ ◆ ESPER_LINK: BOUND │ │
45+
│ │ kernel → operator │ │
46+
│ │ flux_rate: 0.98 │ │
47+
│ └────────────────────────┘ │
48+
│ │
49+
│ STATUS: ALL_SYSTEMS_GO │
50+
└─────────────────────────────┘
51+
`}</pre>
52+
{:else if id === 'visage'}
53+
<pre class="ascii" aria-hidden="true">{`
54+
┌───────────────────────┐
55+
│ │
56+
│ ┌───────────┐ │
57+
│ │ ◎ ◎ │ │
58+
│ │ ╲╱ │ │
59+
│ │ ════ │ │
60+
│ └───────────┘ │
61+
│ │
62+
│ SCAN_MODE: ACTIVE │
63+
│ INFERENCE: ON_DEVICE │
64+
│ MODEL: ONNX_v2 │
65+
│ MATCH: ██████░ 99.7% │
66+
│ LIVENESS: VERIFIED │
67+
│ │
68+
│ ◆ BIOMETRIC_SEALED │
69+
└───────────────────────┘
70+
`}</pre>
71+
{:else if id === 'mrhaven'}
72+
<pre class="ascii" aria-hidden="true">{`
73+
╔═══════════════════════════╗
74+
║ ◆ VAULT_PRIME_001 ║
75+
╠═══════════════════════════╣
76+
║ ║
77+
║ ASSET: USDC ║
78+
║ CHAIN: BASE_L2 ║
79+
║ CUSTODY: NON_CUSTODIAL ║
80+
║ ║
81+
║ ┌───────────────────┐ ║
82+
║ │ LOCK: ████ ARMED │ ║
83+
║ │ HEIR: ████ SET │ ║
84+
║ │ AGENT: ████ BOUND │ ║
85+
║ └───────────────────┘ ║
86+
║ ║
87+
║ DEAD_SWITCH: 90_DAYS ║
88+
║ CONTRACT: IMMUTABLE ║
89+
╚═══════════════════════════╝
90+
`}</pre>
91+
{:else if id === 'codex'}
92+
<pre class="ascii" aria-hidden="true">{`
93+
┌─────────────────────────────┐
94+
│ ◆◆◆ THE SOVREN CODEX ◆◆◆│
95+
├─────────────────────────────┤
96+
│ │
97+
│ AETHER_NET ──── GRIMOIRE │
98+
│ │ │ │
99+
│ ▼ ▼ │
100+
│ ┌─────────┐ ┌──────────┐ │
101+
│ │ LEYLINES│ │INCANTATION│ │
102+
│ │ ◆◆◆◆◆◆ │ │ _CRD │ │
103+
│ └─────────┘ └──────────┘ │
104+
│ │
105+
│ DOCTRINE: SOVEREIGNTY │
106+
│ REVISION: 0.8.2-ARCANE │
107+
│ SEAL: ████████████ BOUND │
108+
└─────────────────────────────┘
109+
`}</pre>
110+
{/if}
111+
</div>
112+
113+
<style>
114+
.ascii-wrap {
115+
display: flex;
116+
justify-content: center;
117+
}
118+
119+
.ascii {
120+
font-family: var(--font-mono);
121+
font-size: 11px;
122+
line-height: 1.4;
123+
color: var(--accent);
124+
opacity: 0.35;
125+
white-space: pre;
126+
margin: 0;
127+
user-select: none;
128+
pointer-events: none;
129+
}
130+
131+
@media (max-width: 768px) {
132+
.ascii {
133+
font-size: 8px;
134+
line-height: 1.3;
135+
}
136+
}
137+
</style>

‎src/lib/EsperCrystal.svelte‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!-- Esper crystal SVG — decorative magitek element -->
2+
<script>
3+
/** @type {number} */
4+
export let size = 120;
5+
</script>
6+
7+
<svg
8+
width={size}
9+
height={size * 1.4}
10+
viewBox="0 0 100 140"
11+
fill="none"
12+
xmlns="http://www.w3.org/2000/svg"
13+
aria-hidden="true"
14+
class="crystal"
15+
>
16+
<!-- Outer crystal shape -->
17+
<polygon
18+
points="50,5 85,40 85,100 50,135 15,100 15,40"
19+
stroke="var(--accent)"
20+
stroke-width="1"
21+
fill="none"
22+
opacity="0.3"
23+
/>
24+
<!-- Inner crystal facets -->
25+
<polygon
26+
points="50,20 72,45 72,95 50,120 28,95 28,45"
27+
stroke="var(--accent)"
28+
stroke-width="0.75"
29+
fill="var(--accent-surface)"
30+
opacity="0.5"
31+
/>
32+
<!-- Center line -->
33+
<line x1="50" y1="20" x2="50" y2="120" stroke="var(--accent)" stroke-width="0.5" opacity="0.3" />
34+
<!-- Cross facets -->
35+
<line x1="28" y1="45" x2="72" y2="45" stroke="var(--accent)" stroke-width="0.5" opacity="0.2" />
36+
<line x1="28" y1="95" x2="72" y2="95" stroke="var(--accent)" stroke-width="0.5" opacity="0.2" />
37+
<!-- Diagonal facets -->
38+
<line x1="50" y1="20" x2="72" y2="45" stroke="var(--accent)" stroke-width="0.5" opacity="0.2" />
39+
<line x1="50" y1="20" x2="28" y2="45" stroke="var(--accent)" stroke-width="0.5" opacity="0.2" />
40+
<line x1="50" y1="120" x2="72" y2="95" stroke="var(--accent)" stroke-width="0.5" opacity="0.2" />
41+
<line x1="50" y1="120" x2="28" y2="95" stroke="var(--accent)" stroke-width="0.5" opacity="0.2" />
42+
<!-- Center glow point -->
43+
<circle cx="50" cy="70" r="3" fill="var(--accent)" opacity="0.6" />
44+
<circle cx="50" cy="70" r="8" fill="var(--accent)" opacity="0.08" />
45+
</svg>
46+
47+
<style>
48+
.crystal {
49+
display: block;
50+
}
51+
</style>

0 commit comments

Comments
 (0)