clement-saillant-cc/docs/superpowers/specs/2026-07-09-clement-saillant-cc-design.md

# clement.saillant.cc — "LE BUS" — Design

**Date:** 2026-07-09
**Status:** Approved by user (brainstorming session 2026-07-09)
**Target:** https://clement.saillant.cc (personal identity hub, hosted on Tower)

## Overview

Personal identity hub for Clément Saillant, built as a **demoscene-style
3D experience**: a crazy bus driving across a giant PCB landscape,
carrying I2C frames as passengers, stopping at "bus stops" that hold the
site's content (bio, identity links, L'Électron Fou music, greetings).
Amiga/demoscene aesthetics throughout: copper bars, sine scroller,
boing ball, tracker music, flat-shaded low-poly, dithering.

The page doubles as the canonical "Clément Saillant" entry point on the
web and provides the reciprocal `rel="me"` link so Mastodon verifies
`clement.saillant.cc` on the `@clement@mastodon.saillant.cc` profile.

## Goals

- One memorable page that says who Clément is and links every identity.
- Reciprocal `rel="me"` verification with Mastodon (green badge).
- Pure fun: demoscene tribute (Amiga, cracktro culture, tracker music,
  tube amps, electronics, L'Électron Fou noise project).
- Zero-maintenance content: no blog, no CMS, static build.

## Non-goals

- Not a CV / recruiting page (lelectronrare.fr and ailiance.fr cover
  professional needs).
- No entry cracktro (approach "A" chosen over "A + cracktro").
- No backend, no analytics, no comments, no CMS.

## Scene design

**World:** a giant PCB seen as a landscape. Dark green substrate,
glowing copper traces, vias as light wells, low-poly flat-shaded
components as buildings (electrolytic caps, resistors, QFP chips).
Saturated Amiga-like palette (~32 colors) with a light ordered-dithering
post-process. Sky: animated **copper bars** shader. A red/white
**boing ball** orbits as a moon.

**The bus:** a crazy van, L'Électron Fou paint job, driving along a main
copper trace that snakes between components. **Scroll drives the bus**
(wheel, arrow keys, touch swipe); the camera follows with easing.
**I2C frames** (small glowing packets labeled `0x42 ACK`, `SDA`, `SCL`…)
board and alight at stops like passengers.

**Permanent HUD:**
- Bottom **sine-wave text scroller**: greetings, project shout-outs,
  free-form nonsense. Content is a plain text array in one source file.
- Mini tracker panel: play/pause MOD, mute.

## The 4 stops (content)

1. **"BOOT"** — bio. An oversized bus-stop sign with a 5-6 line bio
   (electronics, sovereign AI, noise music, escape rooms) + pixel-art
   avatar.
2. **"IDENTITÉS"** — the hub core. A forest of hijacked road signs,
   clickable in 3D:
   - Mastodon `@clement@mastodon.saillant.cc` (rel=me)
   - Gitea `git.saillant.cc`
   - lelectronrare.fr
   - ailiance.fr
   - Hypneum Lab
   - HuggingFace
3. **"L'ÉLECTRON FOU"** — a giant **tube amp** whose tubes glow in
   rhythm, VU meters moving. Presents the noise project; listen links
   point to **Bandcamp**.
4. **"GREETINGS"** (terminus) — end-of-demo style credits: greetings to
   communities (KiCad, fediverse, French demoscene…), credits,
   "ride again?" teleports back to start.

## Audio

- **MOD tracker player** (libopenmpt via chiptune2.js): a real chiptune
  module as background music. Starts only after first user interaction
  (browser autoplay policy), mutable at all times.
- At the Électron Fou stop, audio ambience shifts toward the noise
  universe.
- Module licensing: use an original module or one with an explicit
  redistribution license (Mod Archive licensed works). Ideally an
  original Électron Fou chiptune (open item).

## Architecture & tech stack

- **Vite + React + React Three Fiber + drei** (same pattern as
  RELAIS-07 / adn.saillant.cc).
- GLSL shaders: copper bars, ordered dithering post-process.
- chiptune2.js / libopenmpt (WASM) for MOD playback.
- Static build output; no server-side code.

### Units

- `scene/` — world (PCB, components, traces), bus, I2C passengers,
  boing ball, sky shaders. Consumes a declarative `stops.ts` config.
- `hud/` — sine scroller, tracker panel. Independent of the 3D scene.
- `content/` — single source of truth: bio text, links (with rel
  attributes), greetings list, stop definitions. Used by BOTH the 3D
  scene and the semantic DOM fallback so they can never diverge.
- `audio/` — MOD player wrapper (lazy-loads WASM after first
  interaction).

## Fallback, accessibility, rel=me (non-negotiable)

- Beneath the canvas, a **real semantic DOM**: `h1` "Clément Saillant",
  bio, and all links including
  `<a rel="me" href="https://mastodon.saillant.cc/@clement">`.
- Served in the static HTML (pre-rendered at build time, not injected
  client-side) so Mastodon's verifier and crawlers see it.
- JS disabled or `prefers-reduced-motion` → the semantic page is shown,
  styled with bitmap fonts; fully usable.
- Keyboard navigation: arrows drive the bus, links are real focusable
  anchors.

## Deployment

- **Repo:** Gitea `electron-rare/clement-saillant-cc`.
- **Host:** Tower — static build served by an nginx container,
  Traefik labels, hostname `clement.saillant.cc` added to the existing
  cloudflared tunnel ingress (same path as mastodon.saillant.cc,
  2026-07-08).
- DNS already resolves (Cloudflare proxied); currently 404 because no
  ingress rule exists.

## Testing

- **vitest**: bus progression logic, stop activation, content config
  integrity (every link has href + label; Mastodon link has rel=me).
- **Playwright smoke**: page loads, canvas mounts, semantic DOM contains
  all links, `rel="me"` present in served HTML (fetch raw HTML, not
  rendered DOM).
- **Perf budget**: 60 fps desktop on the M5, acceptable on mid-range
  mobile; low-poly + instanced components; total JS+assets < ~3 MB
  gzipped excluding MOD/WASM lazy chunks.

## Open items (to resolve during implementation)

- Bandcamp URL for L'Électron Fou.
- Final bio text + pixel-art avatar.
- Greetings list content.
- MOD module choice (original Électron Fou chiptune vs licensed module).

## Descoped (2026-07-09)

- Ordered-dithering post-process was replaced by low-dpr chunky pixels —
  an equivalent retro effect with zero added dependencies.
- Per-stop audio ambience shift at the Électron Fou stop was deferred;
  a single MOD track ships for the whole ride instead.