From 7603ead1124e3b16e3ba0531a55a6b93bcd174b2 Mon Sep 17 00:00:00 2001 From: soryu Date: Thu, 30 Apr 2026 23:33:51 +0100 Subject: WIP: heartbeat checkpoint --- docs/homepage-redesign-brainstorm.md | 521 ++++++++++++++ frontend/package-lock.json | 8 - frontend/src/components/LandingPage.tsx | 501 +++++++++----- frontend/src/styles/pc98.css | 1152 +++++++++++++++++++++++++++++++ frontend/tsconfig.tsbuildinfo | 2 +- 5 files changed, 1987 insertions(+), 197 deletions(-) create mode 100644 docs/homepage-redesign-brainstorm.md diff --git a/docs/homepage-redesign-brainstorm.md b/docs/homepage-redesign-brainstorm.md new file mode 100644 index 0000000..fb73ba3 --- /dev/null +++ b/docs/homepage-redesign-brainstorm.md @@ -0,0 +1,521 @@ +# soryu.co Homepage Redesign — Brainstorm + +> Step 1 of the directive "soryu-co/soryu - soryu". Research + writing only — no code changes. + +## Clarification Used + +The planning step asked the user to confirm the homepage's primary purpose / audience. The user responded: + +> **Company landing page (A)** — i.e. a landing page for the soryu.co +> observability/surveillance infrastructure business with **MAKIMA** as a flagship +> product. + +Follow-up clarification (in-flight): *"This is a company page. makima is one of +the company's products."* — i.e. **soryu is the company; MAKIMA is one product +among several.** The page must therefore lead with the company's value prop, +not with MAKIMA. MAKIMA gets one dedicated section (as the flagship product), +but the surrounding sections (Mission, Capabilities, Contact) belong to soryu +the company. Implementation steps must keep this hierarchy: `soryu (company)` +→ `MAKIMA (one of its products)` — never the reverse. + +All three directions below, and the final recommendation, are framed against +that brief: a small-but-serious infra company that sells real-time observability +and orchestration, with whimsy as a brand differentiator (not a bit-part). + +--- + +## 1. Audit of the current homepage + +Files audited: + +- `frontend/src/components/LandingPage.tsx` (234 lines) +- `frontend/src/components/HeartLogo.tsx` (5 size variants; `header`, + `header-no-rays`, `small`, `medium`, `large`) +- `frontend/src/components/LoadingScreen.tsx` (4 s intro with rotating rays + + type-on "Whisper of the Heart" subtitle) +- `frontend/index.html` (title `soryu.co`; favicon = crane-logo-transparent; + only `DotGothic16` is loaded from `index.html`. The rest of the fonts — + Orbitron / Dela Gothic One / Coral Pixels / Notable / Noto Serif JP — are + loaded from `pc98.css` line 1) +- `frontend/src/styles/pc98.css` (4682 lines). Relevant blocks: + `:root` tokens (lines 3–20), `.modern-landing-page` (614+), + `.background-only` (645), `.bottom-stats` / `.rf-stats` (649, 2238), + `.floating-header` / `.brand` / `.system-info` (724–905+), + `.heart-logo.header-no-rays` (824–863), `.taisho-cover` / + `.cover-content` / `.masthead` / `.issue-badge` / `.hero` / + `.mission-screen` / `.makima-screen` (1694–1970), `.cta-area` (2393). +- `frontend/public/`: `PC98Doukuusei.webp` (~1.5 MB), + `background-animation.gif` (~208 KB), `nazrin-bg.jpg` (~199 KB), + `kaomoji.txt` (`ᗜ˰ᗜ ᗜ▵ᗜ ᗜˬᗜ`), `ascii/ascii1.txt`–`ascii7.txt` + + flagged variants, `logo/crane-logo-transparent.png` / + `crane-logo.png` / `crane.svg` / `makima-logo.svg` / + `makima-icon-red.svg`. + +### What works (keep) + +- **HeartLogo** — distinctive heart-with-rising-sun-rays SVG; the `large`, + `medium`, and `header-no-rays` variants are all production-ready. + The `M50,85 C50,85 10,60 10,35 ...` heart path and `#8B0000` crimson + + alternating black rays are the visual anchor of the brand. +- **Crane brand mark** in the header (`/logo/crane-logo-transparent.png` + with `/logo/crane-logo.png` fallback). This is the company's actual + identity mark — keep it as the navigation-anchored logotype. +- **PC-98 palette** (`--bg #000033`, `--accent #ff6699`, `--accent2 #66ccff`, + `--accent3 #ffcc66`) plus crimson `#8B0000` from the heart logo. This + combination is genuinely on-brand and unusual; refine, don't replace. +- **Vertical JP/EN masthead** (`そりゅう / SORYU`) styled as a PC-98 + dialogue chip — a strong, recognisable signature. +- **`かはいい Vol.01` issue badge** — cute, harmless, gives the page an + editorial flavour. Worth keeping (probably demoted to footer). +- **Dialogue-box-style CTAs** (`.taisho-cta`) — the bevelled cyan buttons + feel right for the era; keep the visual language, restrict the count. +- **LoadingScreen intro** — the 4 s rays + type-on subtitle is a tasteful + branded micro-moment. Out of scope for this redesign but worth noting: + it sets expectations for the look downstream. +- **Kaomoji + ASCII assets** — already in `frontend/public/`; great for + small whimsical accents (footer signature, easter eggs). + +### What undermines professionalism (remove or replace) + +- **Fake `Velocity` (km/h) and `Energy` (MJ) stats** at the bottom that + ramp up over 2 seconds and then jitter ±3 / ±0.125 forever. Decorative + numbers with no business meaning are the single biggest "this is a + toy" signal on the page. Code: lines 13–79 of `LandingPage.tsx`. +- **Clickable `LIVE / STDBY` toggle** in the header (`isStandby`, + lines 12, 131–136). It does nothing other than swap a status dot + colour. A landing page should not have a non-functional control. +- **Mission ↔ MAKIMA panel toggle** (lines 17, 94–100, 167–193). + Two competing pitches that share the same hero slot, mutually + exclusive, both behind buttons. A scroll-down structure with both + visible is far more legible. +- **Above-the-fold has no value proposition.** The default hero is just + the masthead + a `
` placeholder + CTAs labelled + Mission / MAKIMA / Login. A first-time visitor cannot tell what the + company does within 3 seconds. +- **Heavy `~208 KB` background GIF** (`/background-animation.gif`) + full-bleed behind everything. Cost is paid on every visit; it competes + visually with the masthead and panels. +- **Mixed font system without a hierarchy.** `pc98.css` loads Orbitron, + Dela Gothic One, Coral Pixels, Notable, Noto Serif JP via the + `@import` on line 1, plus `DotGothic16` via `index.html`, plus the + system MS Gothic fallback. The current page uses MS Gothic + ad-hoc + styling but never establishes display vs body vs mono. +- **No real navigation.** No mission / product / contact links anywhere. +- **No footer.** No copyright, no contact, no legal. Required for a + company landing page. +- **No content sections below the fold.** The page is a single + 100 vh hero; scrolling reveals nothing. +- **Cramped grid layout.** `.cover-content` is a 220 px / 1 fr two-column + grid with a CTA row pinned at the bottom; everything fights for the + same viewport. +- **Inconsistent responsive structure.** Only a few media queries; the + fixed-position pillar layout (`.left-pillar` / `.right-pillar`) is a + legacy of the VN interface and not used on this landing page, but the + mental model still leaks. + +--- + +## 2. Three Design Directions + +All three retain `` and `/logo/crane-logo-transparent.png` as +non-negotiables. + +### Direction A — "PC-98 Software Catalog" + +- **Pitch.** A Compile / Falcom title-screen-meets-software-product-page. + Looks like the back of a 3.5″ floppy box: structured, indexed, + unmistakably PC-98, but with a serious editorial spine. +- **Aesthetic vibe.** Late-80s / early-90s NEC PC-9801 catalog pages, + Compile *Disc Station* covers, *EVE Burst Error* main menu, Falcom + *Ys* manual interior. Dark navy field with cyan dialogue-box + panels; crimson is reserved for the heart logo and primary CTAs. + +``` ++----------------------------------------------------------+ +| [crane] そりゅう SORYU Mission MAKIMA Contact | <- floating header ++----------------------------------------------------------+ +| ┌──────────────┐ | +| │ そりゅう / SORYU │ [ HEART LOGO — large w/ rays ] | +| │ vertical chip │ | +| └──────────────┘ | +| | +| Real-time observability you can trust. | +| Streaming infrastructure for mission-critical | +| surveillance and decision systems. | +| | +| [ ▶ Open MAKIMA ] [ Talk to us ] | ++--------------------- mission ---------------------------+ +| ## Mission | +| Two-column dialogue panel. Left: 90-word paragraph. | +| Right: Doukyuusei screenshot cropped tastefully (320px). | ++--------------------- makima ----------------------------+ +| ## MAKIMA — Mesh Orchestration Platform | +| Pitch + 3 capability cards: Spawn / Coordinate / Observe | ++--------------------- capabilities ----------------------+ +| 2x3 grid of capability tiles: Streaming, Observability, | +| Mesh, Targeting, Edge, Audit | ++--------------------- contact / footer ------------------+ +| crane mark · soryu.co · contact@soryu.co · かはいい Vol.01 | ++----------------------------------------------------------+ +``` + +- **Typography pairing.** + - Display headlines: **Dela Gothic One** (heavy black sans, uses the + Latin glyphs and gives the catalog cover its "thunk"). + - Section eyebrows + masthead JP: **Noto Serif JP 700** for headings, + **DotGothic16** for the vertical kana chip and labels. + - Body: **Noto Serif JP 400** with `MS Gothic` fallback for JP. + - Mono / system: **DotGothic16** for KPI labels, navigation status, + captions. + - Orbitron is **not** used here (it belongs to the VN interface, not + a corporate landing page). +- **Color palette adjustments.** Background unchanged (`#000033`). + Promote crimson `#8B0000` from logo-only to "accent that means + action" (CTAs, link underlines). Demote pink `--accent #ff6699` to + decorative use only (issue badge, footer kaomoji). Cyan + `--accent2 #66ccff` becomes the structural rule colour for panel + borders. Gold `--accent3 #ffcc66` is reserved for status indicators + (e.g. "v1.0.0"). +- **Content hierarchy.** + 1. Hero — masthead + heart logo + headline + subhead + 2 CTAs. + 2. Mission. + 3. MAKIMA (product showcase). + 4. Capabilities (the rest of the offering). + 5. Contact / Footer. +- **Key interactions and motion.** Slow idle ray rotation on the hero + heart logo (≥60 s/turn). Subtle CRT scanline overlay at ≤6 % alpha. + Hover: panels brighten the cyan border one shade; CTAs hard-shift + the 4 px offset shadow. Smooth in-page anchor scroll for nav. +- **Retained.** HeartLogo (hero centerpiece + header-no-rays mini), + crane mark in header, JP/EN masthead chip, issue badge (footer), + cyan dialogue-box visual language, kaomoji `ᗜˬᗜ` as a footer + signature. +- **Removed.** Fake Velocity / Energy stats, LIVE/STDBY toggle, panel + toggle pattern, `background-animation.gif` full-bleed, ad-hoc + `.taisho-cover` grid. +- **Risk.** "Catalog page" is a layout idea, not a story; if the copy + is weak, this becomes a glorified link list. Mitigation: the + recommended copy lines below give the hero a real value prop. + +### Direction B — "Visual Novel Title Screen + Scrollable Chapters" + +- **Pitch.** The page **opens** like a VN title screen — fullscreen + heart logo, animated rays, JP/EN masthead, two menu choices — and + then scrolling reveals the company "as if" it were the VN. Each + section is a dialogue scene; products are character portraits. +- **Aesthetic vibe.** *Doukyuusei* title screen, *YU-NO* main menu, + *Famicom Tantei Club* dialogue framing, *EVE Burst Error* chapter + selects. Heaviest whimsy of the three. + +``` +[VIEWPORT 100vh: VN TITLE SCREEN] ++------------------------------------------+ +| [crane] そりゅう SORYU v1.0.0 | +| | +| | +| ╭────────────────────╮ | +| │ HEART LOGO LARGE │ | +| │ rays rotating │ | +| ╰────────────────────╯ | +| | +| S O R Y U | +| Whisper of the Heart | +| | +| ▶ Begin | +| Login | +| | +| (scroll to read the script ↓) | ++------------------------------------------+ + +[CHAPTER 1: MISSION] - dialogue-box scene ++------------------------------------------+ +| [PORTRAIT: cropped Doukyuusei cell] | +| ┌─ そりゅう ──────────┐ | +| │ "We build real-time │ | +| │ systems for ..." │ | +| └─────────────────────┘ | ++------------------------------------------+ + +[CHAPTER 2: MAKIMA] - "character intro" panel ++------------------------------------------+ +| ╔══════════════╗ | +| ║ MAKIMA ║ "Mesh orchestration | +| ║ [makima-icon] ║ for distributed | +| ║ /Control/ ║ daemon meshes." | +| ╚══════════════╝ | +| [▶ Spawn] [▶ Coordinate] [▶ Observe] | ++------------------------------------------+ + +[CHAPTER 3: CAPABILITIES] - choice menu ++------------------------------------------+ +| ▶ Streaming | +| Observability | +| Mesh Orchestration | +| Targeting & Decision | +| Edge & Audit | ++------------------------------------------+ + +[FOOTER: end-of-script] ++------------------------------------------+ +| ── 終 ── crane · soryu.co · contact | ++------------------------------------------+ +``` + +- **Typography pairing.** **Notable** for the title-screen wordmark + (its fixed-width, slab-sans look reads as 90s arcade-ish), **Noto + Serif JP 700** for chapter titles, **MS Gothic / DotGothic16** for + dialogue body (deliberately pixel-y), **Dela Gothic One** for one + giant section break "終". Orbitron deliberately avoided. +- **Color palette adjustments.** Title screen leans on the existing + navy + crimson + cyan exactly as today (works well for a VN cold + open). For chapters, raise the chapter background one shade + (`#0a0a3a`) to lift dialogue boxes off the field. Pink + `--accent #ff6699` is used **only** for chapter numbers and `terminus` + glyphs, not body links. +- **Content hierarchy.** 1) Title screen. 2) Chapter 1: Mission. + 3) Chapter 2: MAKIMA. 4) Chapter 3: Capabilities (choice-menu). + 5) Footer / "終". +- **Key interactions and motion.** Idle ray rotation. Type-on text on + scroll-in for each chapter's dialogue (re-uses the LoadingScreen + technique). Choice menu has a `▶` cursor that animates between rows + on hover. Scroll-snapping between chapters is optional (off by + default for accessibility). +- **Retained.** HeartLogo (title screen), crane mark (header), + masthead, issue badge (relocated to footer "終"), `ascii/*.txt` + art used as section ornaments, `kaomoji.txt` as scene captions. +- **Removed.** Fake stats, LIVE/STDBY toggle, panel toggle, the + fluctuating-numbers useEffect. +- **Risk.** Strongest whimsy = lowest perceived professionalism. + An enterprise visitor evaluating an observability vendor may + bounce because the page "looks like a game". This is the + highest-charm / highest-risk option. + +### Direction C — "Editorial × Anime Magazine" + +- **Pitch.** Vogue / *IDEA Magazine* / *Gainax design book* grid with + PC-98 chromatic accents. Large kanji typography, generous + whitespace, products and capabilities laid out as featured + articles. Most professional-feeling of the three; whimsy is held + in reserve and surfaced through carefully placed ornaments. + +``` ++-------------------------------------------------------------+ +| [crane] そりゅう SORYU | +| Vol.01 Mission · MAKIMA · Contact | ++-------------------------------------------------------------+ +| FEATURE | +| Real-time observability | +| for mission-critical | +| infrastructure. | +| | +| [ HEART LOGO medium ] Sub-deck (3 lines): | +| We build streaming & | +| surveillance systems | +| that turn live data | +| into reliable insight. | +| | +| [ ▶ Open MAKIMA ] [ Contact us ] | ++-------------------------------------------------------------+ +| 01 / MISSION | +| ----------------- | +| Long-form lede paragraph in Noto Serif JP 400, justified. | +| | small Doukyuusei thumbnail aligned right (max 280px) | ++-------------------------------------------------------------+ +| 02 / FEATURE — MAKIMA | +| ----------------- | +| Two-column editorial: pitch left, 3 capability cards right | +| ┌─Spawn─┐ ┌─Coord─┐ ┌─Observe─┐ | ++-------------------------------------------------------------+ +| 03 / CAPABILITIES | +| 3-up grid: Streaming · Observability · Mesh · Targeting | ++-------------------------------------------------------------+ +| 04 / CONTACT | +| Issue mark "かはいい Vol.01" · contact@soryu.co · crane mark | ++-------------------------------------------------------------+ +``` + +- **Typography pairing.** Display: **Dela Gothic One** for one giant + feature headline + section numerals (`01 /`). Headings: + **Noto Serif JP 700** (kanji) paired with **Notable** (Latin) on a + shared baseline. Body: **Noto Serif JP 400**. Mono / captions: + **DotGothic16** for tiny PC-98 flavour in section eyebrows + ("FEATURE", "vol.01"), folio / pagination, footnotes. Orbitron is + banned; it's wrong for editorial. +- **Color palette adjustments.** Background shifts a hair lighter to + `#0a0e30` (still navy, but readable for long-form text). Body text + is white at 92 % alpha. Crimson `#8B0000` is the only chromatic + accent in body copy (drop caps, link underlines, section + numerals). Cyan `#66ccff` is reduced to thin 1 px rules. Pink + `--accent #ff6699` is used **only once**, in the issue badge mark. + Gold `#ffcc66` is reserved for the byline / version string. +- **Content hierarchy.** 1) Feature spread (hero). 2) `01 / Mission`. + 3) `02 / Feature — MAKIMA`. 4) `03 / Capabilities`. 5) `04 / Contact`. +- **Key interactions and motion.** Almost none. Idle ray rotation on + the heart logo only. Anchor links are smooth-scroll. Hover state on + cards is a 1 px crimson rule appearing under the title (not a lift). + CRT scanlines optional and very faint (≤4 % alpha). Reduced motion + disables the ray rotation entirely. +- **Retained.** HeartLogo (hero, smaller than today — `medium`), + crane mark (header), JP/EN masthead (folded into header lockup, + no longer the giant vertical chip), `かはいい Vol.01` (footer + issue badge). +- **Removed.** Fake stats, LIVE/STDBY toggle, panel toggle, + background GIF, `.taisho-cover` grid pattern. The vertical + "masthead-vertical" chip is reduced to a horizontal lockup. +- **Risk.** Most editorial = least PC-98 / VN flavour. Risks + feeling like "a startup landing page that happens to have a + crimson heart" rather than "a PC-98 era studio". Mitigation: + ornaments (DotGothic16 captions, crimson drop-caps, faint + scanlines, kaomoji in footer) preserve the era cues even when + the macro-layout is editorial. + +--- + +## 3. Recommendation + +> **Direction A — "PC-98 Software Catalog" — with one calibration toward +> Direction C's restraint.** + +### Why + +The user picked option A: *company landing page for an +observability/surveillance infrastructure business with MAKIMA as a flagship +product*. That brief implies a **first-time enterprise visitor** who needs to +understand, in 5–10 seconds: + +1. what the company does, +2. what MAKIMA is, and +3. how to talk to a human. + +Direction A delivers all three in a single scroll while keeping the PC-98 +cyan-on-navy dialogue-box voice that already lives in `pc98.css` (lots of +existing styles can be reused as primitives). It is more structured than +B (which buries the value prop behind a VN cold open) and more on-brand +than C (which risks sanding off the era cues that make soryu visually +distinctive). + +The "calibration toward C" is the typography discipline: pick **Dela Gothic +One** as the single display face, **Noto Serif JP** as the body face, and +**DotGothic16** as the mono / caption face — and use nothing else. Drop +Orbitron and Coral Pixels from the load list when it's safe. This lets the +catalog read as deliberate rather than as a pile of free Google fonts. + +### Detailed wireframe (recommended direction) + +``` +================================================================ +| [crane mark 40px] そりゅう/SORYU Mission MAKIMA Contact | <- .home-section header (sticky after scroll) +| | retains: floating-header fade-in feel +================================================================ +| | +| ┌────────────────────────────┐ | +| │ そりゅう │ | +| │ SORYU │ <- .home-jp | +| └────────────────────────────┘ | +| | +| [ HEART LOGO — size="large" ] | <- HeartLogo retained, hero centerpiece, +| [ rays rotating slowly ] | .home-rays-idle wrapper (≥60s/turn) +| | +| Real-time observability | <- .home-display, Dela Gothic One +| you can trust. | +| | +| Streaming infrastructure for mission-critical | <- .home-body, Noto Serif JP 400 +| surveillance and decision systems. | +| | +| [ ▶ Open MAKIMA ] [ Talk to us ] | <- .home-cta (crimson) + .home-cta--ghost +| | +================================================================ +| 01 / MISSION | <- .home-section__header eyebrow +| | +| ┌──────────────────────────────────────────────────────────┐ | +| │ Long-form paragraph (~80 words). The company exists to │ | <- .home-panel +| │ deliver low-latency streaming and infrastructure that │ | +| │ turns live data into reliable, secure insight ... │ | +| │ │ | +| │ [ small Doukyuusei.webp thumbnail, 280px, │ | <- existing /PC98Doukuusei.webp, +| │ lazy-loaded, decoding=async ] │ | cropped tastefully +| └──────────────────────────────────────────────────────────┘ | +================================================================ +| 02 / PRODUCTS — MAKIMA | <- eyebrow makes clear this is one +| | product in soryu's lineup; +| Flagship product. MAKIMA is a control system for | the section can later list +| orchestrating distributed daemon meshes. | siblings without restructuring. +| | +| ┌─Spawn────────┐ ┌─Coordinate────┐ ┌─Observe─────┐ | <- .home-card x3, includes +| │ launch │ │ direct fleets │ │ realtime │ | /logo/makima-logo.svg as +| │ daemons, │ │ across hosts. │ │ telemetry & │ | small mark, not centerpiece +| │ across hosts │ │ │ │ overlays. │ | +| └──────────────┘ └───────────────┘ └─────────────┘ | +| | +| [ Open MAKIMA → makima.jp ] | <- triggers existing pendingAction +================================================================ 'makimaRedirect' + LoadingScreen +| 03 / CAPABILITIES | +| | +| ┌────────┐ ┌────────┐ ┌────────┐ | +| │Stream- │ │Observ- │ │ Mesh │ | <- .home-card x6 in 3-col grid +| │ ing │ │ ability│ │ orch. │ | collapses to 2 / 1 col under +| └────────┘ └────────┘ └────────┘ | breakpoints +| ┌────────┐ ┌────────┐ ┌────────┐ | +| │Target- │ │ Edge & │ │ Secure │ | +| │ ing │ │ Audit │ │ Infra │ | +| └────────┘ └────────┘ └────────┘ | +================================================================ +| 04 / CONTACT | +| | +| Talk to us about deployment, integration, or research. | +| contact@soryu.co | +================================================================ +| [crane 24px] soryu.co ᗜˬᗜ かはいい Vol.01 © 2026 | <- .home-footer +================================================================ +``` + +### Asset reuse map + +| Asset | Used in recommended direction? | +|----------------------------------------------------|----------------------------------------| +| `frontend/src/components/HeartLogo.tsx` | YES — `large` (hero), `header-no-rays` (header) | +| `frontend/public/logo/crane-logo-transparent.png` | YES — header brand mark + footer mark | +| `frontend/public/logo/crane-logo.png` | YES — onError fallback | +| `frontend/public/logo/makima-logo.svg` | YES — small mark in 02 / MAKIMA | +| `frontend/public/PC98Doukuusei.webp` | YES — small thumbnail in 01 / MISSION (lazy, max 280 px) | +| `frontend/public/background-animation.gif` | NO — removed (saves ~208 KB) | +| `frontend/public/nazrin-bg.jpg` | NO | +| `frontend/public/kaomoji.txt` | YES — `ᗜˬᗜ` in footer | +| `frontend/public/ascii/*.txt` | OPTIONAL — small ornament between sections | +| `frontend/src/components/LoadingScreen.tsx` | YES — preserved for `Login → makima.jp` redirect, untouched | +| `floating-header` / `brand` CSS | YES — restyled via `.home-*` primitives | +| `taisho-cover` / `cover-content` / `masthead-vertical` / `hero` / `mission-screen` / `makima-screen` / `cta-area` / `bottom-stats` / `rf-stats` CSS | DORMANT — left in `pc98.css` but no longer applied by the new `LandingPage.tsx` | + +### Concrete copy lines (use verbatim in implementation steps) + +1. **Hero headline (display).** + `Real-time observability you can trust.` +2. **Hero subhead (body).** + `Streaming infrastructure for mission-critical surveillance and decision systems.` +3. **Hero primary CTA.** `Open MAKIMA` +4. **Hero ghost CTA.** `Talk to us` +5. **Section eyebrows.** + `01 / MISSION` · `02 / PRODUCTS` (with `MAKIMA` as the flagship sub-title) + · `03 / CAPABILITIES` · `04 / CONTACT` +6. **Mission lede.** + `We build real-time systems for mission-critical observability and surveillance — low-latency streaming and infrastructure that turn live data into reliable, secure insight.` +7. **MAKIMA pitch.** + `MAKIMA, soryu's flagship product, is a control system for orchestrating distributed daemon meshes — coordinating concurrent execution across distinct domains under one command interface.` +8. **MAKIMA card titles + one-liners.** + - `Spawn — launch worker daemons across hosts.` + - `Coordinate — direct fleets in real time.` + - `Observe — telemetry and overlays for live operations.` +9. **MAKIMA section CTA.** `Open MAKIMA →` (triggers existing + `pendingAction='makimaRedirect'` + `LoadingScreen` flow that ends in + `window.location.assign('https://makima.jp')`). +10. **Contact line.** + `Talk to us about deployment, integration, or research. contact@soryu.co` +11. **Footer line.** + `soryu.co · ᗜˬᗜ · かはいい Vol.01 · © 2026` + +### Out of scope for this step + +- No code changes. Only `docs/homepage-redesign-brainstorm.md` is added. +- The next step (`Establish design tokens and section scaffold`) reads + this doc and adds `.home-*` CSS primitives. The step after that + rewrites `LandingPage.tsx`. diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 230ed07..2114b2c 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -66,7 +66,6 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.3.tgz", "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==", "dev": true, - "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.27.1", @@ -1060,7 +1059,6 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-24.3.1.tgz", "integrity": "sha512-3vXmQDXy+woz+gnrTvuvNrPzekOi+Ds0ReMxw0LzBiK3a+1k0kQn9f2NWk+lgD4rJehFUmYy2gMhJ2ZI+7YP9g==", "dev": true, - "peer": true, "dependencies": { "undici-types": "~7.10.0" } @@ -1076,7 +1074,6 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.24.tgz", "integrity": "sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==", "dev": true, - "peer": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -1159,7 +1156,6 @@ "url": "https://github.com/sponsors/ai" } ], - "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001737", "electron-to-chromium": "^1.5.211", @@ -1391,7 +1387,6 @@ "url": "https://github.com/sponsors/ai" } ], - "peer": true, "engines": { "node": "^20.0.0 || >=22.0.0" } @@ -1440,7 +1435,6 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", - "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -1452,7 +1446,6 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", - "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -1626,7 +1619,6 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz", "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==", "dev": true, - "peer": true, "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.43", diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx index f126d6f..b85f6bf 100644 --- a/frontend/src/components/LandingPage.tsx +++ b/frontend/src/components/LandingPage.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useRef } from 'react' +import React, { useState, useEffect } from 'react' import { LoadingScreen } from './LoadingScreen' import { HeartLogo } from './HeartLogo' @@ -6,76 +6,51 @@ interface LandingPageProps { onLogin: () => void } +type PendingAction = null | 'makimaRedirect' + +const CAPABILITIES: Array<{ eyebrow: string; title: string; body: string }> = [ + { + eyebrow: '01', + title: 'Real-time streaming', + body: 'Low-latency pipelines that move live signals from source to operator without lag.', + }, + { + eyebrow: '02', + title: 'Observability', + body: 'End-to-end telemetry — traces, metrics, and structured logs designed for time-critical work.', + }, + { + eyebrow: '03', + title: 'Mesh orchestration', + body: 'Coordinate distributed daemons and worker fleets across hosts, regions, and domains.', + }, + { + eyebrow: '04', + title: 'Targeting & decision', + body: 'Tooling for the moment a decision has to be made, and the audit trail it leaves behind.', + }, + { + eyebrow: '05', + title: 'Edge & audit', + body: 'Run close to the data, retain the evidence — built for environments where both matter.', + }, + { + eyebrow: '06', + title: 'Secure infrastructure', + body: 'Defense-grade fundamentals: identity, isolation, and verifiable boundaries by default.', + }, +] + export function LandingPage({ onLogin }: LandingPageProps) { const [loading, setLoading] = useState(false) const [showLanding, setShowLanding] = useState(false) - const [isStandby, setIsStandby] = useState(true) // false = LIVE, true = STDBY - const [velocity, setVelocity] = useState(0) - const [energy, setEnergy] = useState(0) - const [ramped, setRamped] = useState(false) - const [pendingAction, setPendingAction] = useState(null) - const [activePanel, setActivePanel] = useState(null) - - // Fade-in landing page content after mount - useEffect(() => { - const timer = setTimeout(() => setShowLanding(true), 500) - return () => clearTimeout(timer) - }, []) + const [pendingAction, setPendingAction] = useState(null) - // Ramp up stats, then keep them fluctuating near max + // Fade-in landing page content after mount (preserves the original + // 500ms reveal timing). useEffect(() => { - const VELOCITY_MAX = 603 - const ENERGY_MAX = 32 - - let rampInterval: number | undefined - let fluctuateInterval: number | undefined - - // Ramp-up for ~2 seconds - const rampDurationMs = 2000 - const tickMs = 30 - const vStep = VELOCITY_MAX / (rampDurationMs / tickMs) - const eStep = ENERGY_MAX / (rampDurationMs / tickMs) - - rampInterval = window.setInterval(() => { - setVelocity((v) => { - const next = v + vStep - return next >= VELOCITY_MAX ? VELOCITY_MAX : next - }) - setEnergy((e) => { - const next = e + eStep - return next >= ENERGY_MAX ? ENERGY_MAX : next - }) - }, tickMs) - - const stopRamp = window.setTimeout(() => { - if (rampInterval) window.clearInterval(rampInterval) - setVelocity(VELOCITY_MAX) - setEnergy(ENERGY_MAX) - setRamped(true) - - // Fluctuate near the top - fluctuateInterval = window.setInterval(() => { - setVelocity((v) => { - const min = VELOCITY_MAX - 18 - const max = VELOCITY_MAX - const delta = (Math.random() - 0.5) * 6 // ±3 - const next = Math.max(min, Math.min(max, v + delta)) - return next - }) - setEnergy((e) => { - const min = ENERGY_MAX - 2 - const max = ENERGY_MAX - const delta = (Math.random() - 0.5) * 0.25 // ±0.125 - const next = Math.max(min, Math.min(max, e + delta)) - return next - }) - }, 220) - }, rampDurationMs + 60) - - return () => { - if (rampInterval) window.clearInterval(rampInterval) - if (fluctuateInterval) window.clearInterval(fluctuateInterval) - } + const timer = window.setTimeout(() => setShowLanding(true), 500) + return () => window.clearTimeout(timer) }, []) const handleLoadingComplete = () => { @@ -86,149 +61,299 @@ export function LandingPage({ onLogin }: LandingPageProps) { onLogin() } - const handleLogin = () => { + // Login / Open MAKIMA — preserves the existing makima.jp redirect handoff + // exactly: setPendingAction('makimaRedirect') → setLoading(true) → on + // , window.location.assign('https://makima.jp'). + const handleOpenMakima = () => { setPendingAction('makimaRedirect') setLoading(true) } - const handleMission = () => { - setActivePanel((mode) => (mode === 'mission' ? null : 'mission')) + if (loading) { + return } - const handleMakimaPanel = () => { - setActivePanel((mode) => (mode === 'makima' ? null : 'makima')) + const visibilityClass = showLanding ? 'fade-in' : 'hidden' + + const handleCraneFallback = (e: React.SyntheticEvent) => { + const img = e.currentTarget + img.onerror = null + img.src = '/logo/crane-logo.png' } return ( -
- {loading && } +
+ + Skip to content + +
+
+ + Soryu + + そりゅう + SORYU + + - {!loading && ( -
-
-
- Soryu { - const img = e.currentTarget as HTMLImageElement - img.onerror = null - img.src = '/logo/crane-logo.png' - }} - /> -
-
- -
+ +
+
-
-
- System: - setIsStandby(!isStandby)} - title="Click to toggle between LIVE and STANDBY" - > - - {isStandby ? 'STDBY' : 'LIVE'} - -
-
- Version: - v1.0.0 -
-
+
+
+ -
- )} -
- {/* Background GIF fills the main body */} - + + +

+ Real-time observability you can trust. +

+

+ Streaming infrastructure for mission-critical surveillance and + decision systems. +

- {/* Minimal overlay: masthead, issue badge, and CTA */} -
-