docs: add clement.saillant.cc design spec
Demoscene-style personal identity hub: bus on a giant PCB, 4 content stops, MOD tracker audio, semantic DOM fallback with rel=me Mastodon verification. Static build, deployed on Tower behind Traefik + cloudflared tunnel.
This commit is contained in:
L'électron rare
@@ -0,0 +1,143 @@
|
|||||||
|
# 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).
|
||||||
Reference in New Issue
Block a user