mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 1 Wiki Activity

feat: the story thread looks like a track on a circuit board

Browse Source 
Owner: the direction is right, but a smooth line is not developer style;
everything else on the site is binary. The thread is now a trace: straight
runs with 45 degree bends, solder points where it bends or meets a figure, a
second fainter track beside it, figures as components (pins on the
rectangular ones, the chapter number in binary inside), and a bit that flips
between 1 and 0 as it travels at the head.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
mmintel
2026-10-05 10:42:52 +02:00
co-authored by Claude Opus 5.5
parent 3e0c9a1605
commit affd4b7ee7
4 changed files with 292 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/globals.css
+58 -19
View File
@@ -1340,31 +1340,70 @@ pre:has(code[class*="language-"]) {
}
/*
* The story thread (see StoryThread): one line down the page, indigo on light
* sections and light on dark ones, with a glowing dot at its head.
* The story thread (see StoryThread): a trace down the page like a track on a
* circuit board. Indigo on light sections, light on dark ones.
*/
.story-thread path {
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
.story-thread {
--thread-ink: #4f46e5;
--thread-ground: #ffffff;
}
.story-thread-light {
stroke: #4f46e5;
.story-thread-on-light {
--thread-ink: #4f46e5;
--thread-ground: #ffffff;
}
.story-thread-dark {
stroke: #c7d2fe;
stroke-width: 2;
.story-thread-on-dark {
--thread-ink: #c7d2fe;
--thread-ground: #0f172a;
}
.story-thread-dot {
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
border-radius: 9999px;
.story-thread path,
.story-thread line {
stroke: var(--thread-ink);
stroke-width: 1.75;
stroke-linecap: square;
stroke-linejoin: miter;
}
/* The second track of the bus. */
.story-thread path.story-thread-bus {
stroke-width: 1;
opacity: 0.38;
}
/* Solder points where the track bends or branches. */
.story-thread-pad {
fill: var(--thread-ground);
stroke: var(--thread-ink);
stroke-width: 1.75;
opacity: 0;
transition: opacity 250ms ease;
}
/* What makes a figure a component: its pins and its number in binary. */
.story-thread-part {
opacity: 0;
transition: opacity 500ms ease 350ms;
}
.story-thread-part text {
fill: var(--thread-ink);
font-family: var(--font-jetbrains-mono), ui-monospace, monospace;
font-weight: 700;
letter-spacing: 0.14em;
}
/* The bit that travels at the head of the track. */
.story-thread-bit {
display: grid;
place-items: center;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border-radius: 3px;
background: #fde68a;
color: #0f172a;
font-family: var(--font-jetbrains-mono), ui-monospace, monospace;
font-size: 12px;
font-weight: 700;
line-height: 1;
box-shadow:
0 0 0 4px rgba(253, 230, 138, 0.28),
0 0 18px 5px rgba(251, 191, 36, 0.85),
0 0 44px 14px rgba(129, 140, 248, 0.55);
0 0 0 3px rgba(253, 230, 138, 0.25),
0 0 18px 4px rgba(251, 191, 36, 0.8),
0 0 40px 12px rgba(129, 140, 248, 0.5);
transition: opacity 300ms ease;
will-change: transform;
}