diff --git a/CLAUDE.md b/CLAUDE.md
index a1748be..f1a9769 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -63,12 +63,14 @@ App lives in `apps/web`. Social media videos live in `apps/video` (Remotion, sta
along the edge of an element, digits drifting off it; glow only on dark surfaces, on light ones just a
few blue digits), `BitSeam` (lit top edge of a dark section), `BitGlow` (light following the pointer on
`data-glow` surfaces). Reuse them instead of inventing new effects.
-- The homepage is a guided story (`apps/web/src/components/story/`): it follows the questions a visitor has
- (`story.chapters` in the content files). Each chapter ends with `NextChapter`, the next question as a link
- that leads on; `StoryGuide` is the rail with one station per chapter and a travelling dot (a pill on
- phones), and the header names the current question. Sections become chapters through `data-chapter`
- (`Block` prop `chapter`). Where the visitor is, is computed in `src/domain/chapters.ts`. A new section
- on the homepage needs a chapter and a question, or it breaks the thread.
+- The homepage is one story with a visible thread (`apps/web/src/components/story/`). Every chapter opens
+ with one sentence from `story` in the content files; read one after the other they tell the way of a
+ project from the idea to the first email. `StoryThread` is one line down the whole page that draws itself
+ as the visitor scrolls: under each sentence it crosses the page, stands a figure on the line and continues
+ on the other side, with a glowing dot at its head. `Block` prop `chapter` gives a section its sentence and
+ figure; how much of the line is drawn is decided in `src/domain/thread.ts`. A new section on the homepage
+ needs a sentence that continues the story, or it breaks the thread. No rails, no "next question" links
+ (owner rejected both).
- `DecodeText` is for monospaced text only; in proportional type the changing glyph widths make text jump.
- Never put an in-view trigger on an element that clips itself away (clip-path): a fully clipped element
never counts as visible. Observe an unclipped wrapper (see `BitWipe`).
diff --git a/apps/web/app/[locale]/page.tsx b/apps/web/app/[locale]/page.tsx
index 93a09c6..2774bb7 100644
--- a/apps/web/app/[locale]/page.tsx
+++ b/apps/web/app/[locale]/page.tsx
@@ -18,11 +18,10 @@ import {
} from "@/src/components/illustrations/WebPresentation";
import { WorkShowcase } from "@/src/components/illustrations/WorkShowcase";
import { Reveal } from "@/src/components/Reveal";
-import { NextChapter } from "@/src/components/story/Chapter";
-import { StoryGuide } from "@/src/components/story/StoryGuide";
+import { StoryThread } from "@/src/components/story/StoryThread";
import { SwipeRow } from "@/src/components/SwipeRow";
import { contentFor } from "@/src/content";
-import type { ChapterId, SplitTitle } from "@/src/content/types";
+import type { SplitTitle } from "@/src/content/types";
import { DEFAULT_LOCALE, parseLocale } from "@/src/domain/locale";
import { languageAlternates, pathFor } from "@/src/domain/routes";
@@ -70,28 +69,11 @@ export default async function LandingPage({ params }: Props) {
faq,
} = content;
- /** What makes a section a chapter, and the hand-over to the one after it. */
- const chapter = (id: ChapterId) => {
- const at = story.chapters.findIndex((item) => item.id === id);
- const own = story.chapters[at];
- const after = story.chapters[at + 1];
- return {
- chapter: own && { id: own.id },
- next: after && {
- id: after.id,
- label: story.next,
- question: after.question,
- },
- };
- };
- const afterHello = chapter("hello").next;
-
return (
);
diff --git a/apps/web/src/components/home/ClosingCta.tsx b/apps/web/src/components/home/ClosingCta.tsx
index 8c23fae..cec2746 100644
--- a/apps/web/src/components/home/ClosingCta.tsx
+++ b/apps/web/src/components/home/ClosingCta.tsx
@@ -8,12 +8,13 @@ import { BitHeadline } from "./BitHeadline";
import { ContactComposer } from "./ContactComposer";
/** ClosingCta: the contact section. One address and a message starter, no form to submit. */
-export const ClosingCta: React.FC<{ contact: Content["contact"] }> = ({
- contact,
-}) => (
+export const ClosingCta: React.FC<{
+ contact: Content["contact"];
+ /** The last sentence of the story; the story thread ends in front of it. */
+ story?: string;
+}> = ({ contact, story }) => (
@@ -29,6 +30,16 @@ export const ClosingCta: React.FC<{ contact: Content["contact"] }> = ({
+ {story && (
+
+
+ {story}
+
+ )}
= ({ id, index, label, title, portraitAlt, children }) => (
+}> = ({ id, index, label, title, portraitAlt, story, children }) => (
{/* Portrait: right side on wide screens, top on small ones. */}
@@ -59,6 +61,9 @@ export const PortraitSection: React.FC<{
viewport={{ once: true, margin: "-10%" }}
transition={{ duration: 0.8, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
>
+
+ {story}
+
{index}
diff --git a/apps/web/src/components/story/Chapter.tsx b/apps/web/src/components/story/Chapter.tsx
deleted file mode 100644
index 10c677b..0000000
--- a/apps/web/src/components/story/Chapter.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as React from "react";
-import { Reveal } from "@/src/components/Reveal";
-
-/**
- * The opening of a chapter: the line coming down from the question the chapter
- * before ended on. The question itself is not repeated here; it stands directly
- * above (see `NextChapter`) and in the header.
- */
-export const ChapterThread: React.FC<{ dark?: boolean }> = ({
- dark = false,
-}) => (
-
-);
-
-/**
- * The end of a chapter: it hands over to the next one by naming the question
- * that comes up now, as a link that leads there.
- */
-export const NextChapter: React.FC<{
- label: string;
- id: string;
- question: string;
- dark?: boolean;
-}> = ({ label, id, question, dark = false }) => (
-
-
-
-
- {label}
-
-
- {question}
-
-
-
- ↓
-
-
-
-);
diff --git a/apps/web/src/components/story/ChapterIntro.tsx b/apps/web/src/components/story/ChapterIntro.tsx
new file mode 100644
index 0000000..fb741e8
--- /dev/null
+++ b/apps/web/src/components/story/ChapterIntro.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import type { Figure } from "./threadPath";
+
+/**
+ * The opening of a chapter: one sentence of the story, and the box in which
+ * the story thread stands its figure. The thread runs along the bottom edge of
+ * this row, so the sentence stands on the line. `flip` mirrors the row; the
+ * thread alternates sides from chapter to chapter.
+ */
+export const ChapterIntro: React.FC<{
+ line: string;
+ figure: Figure;
+ flip: boolean;
+ dark?: boolean;
+}> = ({ line, figure, flip, dark = false }) => (
+
+
+ {line}
+
+
+
+);
diff --git a/apps/web/src/components/story/StoryGuide.tsx b/apps/web/src/components/story/StoryGuide.tsx
deleted file mode 100644
index b86486a..0000000
--- a/apps/web/src/components/story/StoryGuide.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { useContent } from "@/src/components/ContentProvider";
-import { useChapter } from "./useChapter";
-
-const RAIL_HEIGHT = 264;
-
-const goTo = (id: string) => {
- document
- .querySelector(`[data-chapter="${id}"]`)
- ?.scrollIntoView({ behavior: "smooth", block: "start" });
-};
-
-/**
- * StoryGuide: the visitor's place in the story, always in view. On wide screens
- * a rail with every chapter as a station and a dot that travels along it; on
- * phones a pill that names the chapter and leads on to the next one.
- */
-export const StoryGuide: React.FC = () => {
- const { story } = useContent();
- const { index, progress, ids } = useChapter();
- const chapters = story.chapters.filter((chapter) => ids.includes(chapter.id));
- if (chapters.length === 0) return null;
-
- const shown = index >= 0;
- const current = chapters[index];
- const next = chapters[index + 1];
- const last = chapters.length - 1;
- // The dot rests on a station while its chapter begins and reaches the next one as it ends.
- const along = Math.min(1, (progress * chapters.length) / last);
-
- return (
- <>
-
-
- {/* Phones: where you are, and one tap to the next chapter. */}
-
-
- );
-};
-
-/** The current chapter and its question, for the middle of the header. */
-export const ChapterNow: React.FC<{ fallback: React.ReactNode }> = ({
- fallback,
-}) => {
- const { story } = useContent();
- const { index, ids } = useChapter();
- const chapters = story.chapters.filter((chapter) => ids.includes(chapter.id));
- const current = chapters[index];
- if (!current) return <>{fallback};
- return (
-
-
- {String(index + 1).padStart(2, "0")}/
- {String(chapters.length).padStart(2, "0")}
-
-
- {current.question}
-
- );
-};
diff --git a/apps/web/src/components/story/StoryThread.tsx b/apps/web/src/components/story/StoryThread.tsx
new file mode 100644
index 0000000..062eec8
--- /dev/null
+++ b/apps/web/src/components/story/StoryThread.tsx
@@ -0,0 +1,211 @@
+"use client";
+
+import * as React from "react";
+import { deepestSoFar, lengthAtDepth } from "@/src/domain/thread";
+import { threadPath, type Box, type Figure, type Stop } from "./threadPath";
+
+/** Marks the box a chapter's figure stands in; the value is the figure. */
+export const FIGURE_ATTRIBUTE = "data-thread-figure";
+/** Marks the point the line ends at. */
+export const END_ATTRIBUTE = "data-thread-end";
+/** Marks the section the line starts in. */
+export const START_ATTRIBUTE = "data-thread-start";
+
+/** Distance between the samples used to map scroll depth to drawn length, in px. */
+const SAMPLE_STEP = 10;
+/** The line is drawn down to this share of the window height. */
+const READING_LINE = 0.66;
+/** How quickly the drawing catches up with the scroll position, per frame. */
+const FOLLOW = 0.075;
+const CONTENT_WIDTH = 1400;
+
+type Layout = {
+ readonly width: number;
+ readonly height: number;
+ readonly d: string;
+ readonly dark: readonly Box[];
+};
+
+const FIGURES: readonly Figure[] = [
+ "diamond",
+ "hexagon",
+ "screen",
+ "circle",
+ "square",
+ "triangle",
+];
+const isFigure = (value: string | null): value is Figure =>
+ FIGURES.some((figure) => figure === value);
+
+/**
+ * StoryThread: one line of light that runs down the whole homepage and draws
+ * itself as the visitor scrolls. Under each chapter's sentence it crosses the
+ * page, stands a figure on the line, and continues on the other side, so the
+ * eye is led from chapter to chapter. A glowing dot travels at its head.
+ * Put it last inside the `relative` wrapper that holds the sections.
+ */
+export const StoryThread: React.FC = () => {
+ const svgRef = React.useRef(null);
+ const lightRef = React.useRef(null);
+ const darkRef = React.useRef(null);
+ const dotRef = React.useRef(null);
+ const clipId = React.useId();
+ const [layout, setLayout] = React.useState(null);
+
+ // Measure the page: where the figures stand, where the dark sections are.
+ React.useEffect(() => {
+ const wrapper = svgRef.current?.parentElement;
+ if (!wrapper) return;
+ let timer = 0;
+
+ const measure = () => {
+ const origin = wrapper.getBoundingClientRect();
+ const boxOf = (element: Element): Box => {
+ const rect = element.getBoundingClientRect();
+ return {
+ x: rect.left - origin.left,
+ y: rect.top - origin.top,
+ width: rect.width,
+ height: rect.height,
+ };
+ };
+ const stops: Stop[] = [];
+ wrapper.querySelectorAll(`[${FIGURE_ATTRIBUTE}]`).forEach((element) => {
+ const figure = element.getAttribute(FIGURE_ATTRIBUTE);
+ const box = boxOf(element);
+ // Hidden panels have no size: they are not on the visitor's way.
+ if (isFigure(figure) && box.width > 0) stops.push({ figure, box });
+ });
+ const startSection = wrapper.querySelector(`[${START_ATTRIBUTE}]`);
+ const first = stops[0];
+ if (!startSection || !first) {
+ setLayout(null);
+ return;
+ }
+ // The margins: half way between the edge of the window and the content.
+ const padding = origin.width >= 768 ? 48 : 20;
+ const margin =
+ (Math.max(0, origin.width - CONTENT_WIDTH) / 2 + padding) / 2;
+ const left = Math.round(margin);
+ const right = Math.round(origin.width - margin);
+ const endElement = wrapper.querySelector(`[${END_ATTRIBUTE}]`);
+ const endBox = endElement ? boxOf(endElement) : null;
+
+ setLayout({
+ width: origin.width,
+ height: origin.height,
+ d: threadPath({
+ start: [left, boxOf(startSection).y],
+ stops,
+ end: endBox ? [endBox.x, endBox.y] : null,
+ left,
+ right,
+ }),
+ dark: Array.from(wrapper.querySelectorAll("section.bg-slate-900")).map(
+ boxOf,
+ ),
+ });
+ };
+
+ const schedule = () => {
+ window.clearTimeout(timer);
+ timer = window.setTimeout(measure, 120);
+ };
+ measure();
+ const observer = new ResizeObserver(schedule);
+ observer.observe(wrapper);
+ return () => {
+ observer.disconnect();
+ window.clearTimeout(timer);
+ };
+ }, []);
+
+ // Draw as far as the visitor has read, and move the dot to the head of the line.
+ React.useEffect(() => {
+ const svg = svgRef.current;
+ const light = lightRef.current;
+ const dark = darkRef.current;
+ const dot = dotRef.current;
+ if (!layout || !svg || !light || !dark || !dot) return;
+
+ const total = light.getTotalLength();
+ const ys: number[] = [];
+ for (let at = 0; at <= total; at += SAMPLE_STEP) {
+ ys.push(light.getPointAtLength(at).y);
+ }
+ const depths = deepestSoFar(ys);
+ for (const path of [light, dark]) {
+ path.style.strokeDasharray = `${total}`;
+ }
+
+ const show = (length: number) => {
+ const offset = `${total - length}`;
+ light.style.strokeDashoffset = offset;
+ dark.style.strokeDashoffset = offset;
+ const head = light.getPointAtLength(length);
+ dot.style.transform = `translate(${head.x}px, ${head.y}px)`;
+ dot.style.opacity = length > 0 && length < total ? "1" : "0";
+ };
+
+ if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+ show(total);
+ dot.style.opacity = "0";
+ return;
+ }
+
+ let frame = 0;
+ let drawn = 0;
+ const target = () => {
+ const top = svg.getBoundingClientRect().top;
+ const depth = window.innerHeight * READING_LINE - top;
+ return Math.min(total, lengthAtDepth(depths, SAMPLE_STEP, depth));
+ };
+ const tick = () => {
+ frame = window.requestAnimationFrame(tick);
+ const gap = target() - drawn;
+ if (Math.abs(gap) < 0.5) return;
+ drawn += gap * FOLLOW;
+ show(drawn);
+ };
+ show(0);
+ frame = window.requestAnimationFrame(tick);
+ return () => window.cancelAnimationFrame(frame);
+ }, [layout]);
+
+ return (
+ <>
+
+
+
+ );
+};
diff --git a/apps/web/src/components/story/threadPath.ts b/apps/web/src/components/story/threadPath.ts
new file mode 100644
index 0000000..b4a7bfb
--- /dev/null
+++ b/apps/web/src/components/story/threadPath.ts
@@ -0,0 +1,131 @@
+/**
+ * Geometry of the story thread: one continuous line down the page. At every
+ * chapter it runs across the full width under the chapter's sentence, stands a
+ * figure on that line, and continues down the other side.
+ */
+
+export type Figure =
+ | "diamond"
+ | "hexagon"
+ | "screen"
+ | "circle"
+ | "square"
+ | "triangle";
+
+export type Box = {
+ readonly x: number;
+ readonly y: number;
+ readonly width: number;
+ readonly height: number;
+};
+
+export type Stop = {
+ readonly figure: Figure;
+ /** Where the figure stands; the line runs along the bottom edge of this box. */
+ readonly box: Box;
+};
+
+type Point = readonly [number, number];
+
+/**
+ * Closed figures in a 100 x 100 box, starting and ending at the bottom centre
+ * (50, 100) and leaving it to the right. The line arrives there, goes once
+ * round the figure, and carries on.
+ */
+const POLYGONS: Readonly, readonly Point[]>> =
+ {
+ diamond: [
+ [95, 55],
+ [50, 10],
+ [5, 55],
+ [50, 100],
+ ],
+ hexagon: [
+ [75, 100],
+ [98, 57],
+ [75, 14],
+ [25, 14],
+ [2, 57],
+ [25, 100],
+ [50, 100],
+ ],
+ screen: [
+ [98, 100],
+ [98, 36],
+ [2, 36],
+ [2, 100],
+ [50, 100],
+ ],
+ square: [
+ [90, 100],
+ [90, 20],
+ [10, 20],
+ [10, 100],
+ [50, 100],
+ ],
+ triangle: [
+ [98, 100],
+ [50, 14],
+ [2, 100],
+ [50, 100],
+ ],
+ };
+
+const CORNER = 36;
+const round = (value: number): number => Math.round(value * 10) / 10;
+
+/** The figure as path commands. `direction` is 1 when the line arrives heading right, -1 heading left. */
+const figurePath = (figure: Figure, box: Box, direction: 1 | -1): string => {
+ const place = ([ux, uy]: Point): string => {
+ const x = direction === 1 ? ux : 100 - ux;
+ return `${round(box.x + (x / 100) * box.width)} ${round(box.y + (uy / 100) * box.height)}`;
+ };
+ if (figure === "circle") {
+ // Four quarter arcs of a circle with centre (50, 55) and radius 45.
+ const k = 24.85;
+ return [
+ `C${place([50 + k, 100])} ${place([95, 55 + k])} ${place([95, 55])}`,
+ `C${place([95, 55 - k])} ${place([50 + k, 10])} ${place([50, 10])}`,
+ `C${place([50 - k, 10])} ${place([5, 55 - k])} ${place([5, 55])}`,
+ `C${place([5, 55 + k])} ${place([50 - k, 100])} ${place([50, 100])}`,
+ ].join("");
+ }
+ return POLYGONS[figure].map((point) => `L${place(point)}`).join("");
+};
+
+/**
+ * The whole line. It starts at `start` in the left margin, visits the stops in
+ * order (arriving from the left at the first, from the right at the second, and
+ * so on), and ends at `end`. `left` and `right` are the x of the two margins.
+ */
+export const threadPath = (thread: {
+ readonly start: Point;
+ readonly stops: readonly Stop[];
+ readonly end: Point | null;
+ readonly left: number;
+ readonly right: number;
+}): string => {
+ const { left, right } = thread;
+ let d = `M${round(thread.start[0])} ${round(thread.start[1])}`;
+ let side = left;
+
+ thread.stops.forEach((stop, index) => {
+ const direction = index % 2 === 0 ? 1 : -1;
+ const from = direction === 1 ? left : right;
+ const to = direction === 1 ? right : left;
+ const y = round(stop.box.y + stop.box.height);
+ const foot = round(stop.box.x + stop.box.width / 2);
+ d +=
+ `L${from} ${y - CORNER}Q${from} ${y} ${from + direction * CORNER} ${y}` +
+ `L${foot} ${y}` +
+ figurePath(stop.figure, stop.box, direction) +
+ `L${to - direction * CORNER} ${y}Q${to} ${y} ${to} ${y + CORNER}`;
+ side = to;
+ });
+
+ if (thread.end) {
+ const [x, y] = thread.end;
+ d += `L${side} ${round(y - CORNER)}Q${side} ${round(y)} ${round(x)} ${round(y)}`;
+ }
+ return d;
+};
diff --git a/apps/web/src/components/story/useChapter.ts b/apps/web/src/components/story/useChapter.ts
deleted file mode 100644
index 5560114..0000000
--- a/apps/web/src/components/story/useChapter.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { chapterAt, storyProgress } from "@/src/domain/chapters";
-
-/** Sections that are chapters of the story carry this attribute with their id. */
-export const CHAPTER_ATTRIBUTE = "data-chapter";
-
-/** The line the visitor reads at, as a share of the window height. */
-const READING_LINE = 0.4;
-
-export type StoryPosition = {
- /** Index of the current chapter in page order, -1 above the first. */
- readonly index: number;
- /** 0 to 1 through the story; every chapter owns the same share. */
- readonly progress: number;
- /** Ids of the chapters found on the page, in order. */
- readonly ids: readonly string[];
-};
-
-const NOWHERE: StoryPosition = { index: -1, progress: 0, ids: [] };
-
-/** Where the visitor is in the story. On a page without chapters, `ids` is empty. */
-export const useChapter = (): StoryPosition => {
- const [position, setPosition] = React.useState(NOWHERE);
-
- React.useEffect(() => {
- let frame = 0;
-
- const measure = () => {
- frame = 0;
- const sections = Array.from(
- document.querySelectorAll(`[${CHAPTER_ATTRIBUTE}]`),
- );
- const tops = sections.map(
- (section) => section.getBoundingClientRect().top + window.scrollY,
- );
- const last = sections[sections.length - 1];
- const end = last
- ? last.getBoundingClientRect().bottom + window.scrollY
- : 0;
- const y = window.scrollY + window.innerHeight * READING_LINE;
- const next: StoryPosition = {
- index: chapterAt(tops, y),
- progress: storyProgress(tops, end, y),
- ids: sections.map(
- (section) => section.getAttribute(CHAPTER_ATTRIBUTE) ?? "",
- ),
- };
- setPosition((current) =>
- current.index === next.index &&
- Math.abs(current.progress - next.progress) < 0.002 &&
- current.ids.length === next.ids.length
- ? current
- : next,
- );
- };
-
- const schedule = () => {
- if (frame === 0) frame = window.requestAnimationFrame(measure);
- };
-
- measure();
- window.addEventListener("scroll", schedule, { passive: true });
- window.addEventListener("resize", schedule);
- return () => {
- window.removeEventListener("scroll", schedule);
- window.removeEventListener("resize", schedule);
- if (frame !== 0) window.cancelAnimationFrame(frame);
- };
- }, []);
-
- return position;
-};
diff --git a/apps/web/src/content/de.ts b/apps/web/src/content/de.ts
index 1912e3d..66d6e19 100644
--- a/apps/web/src/content/de.ts
+++ b/apps/web/src/content/de.ts
@@ -484,30 +484,16 @@ export const de: Content = {
cta: "Nach einer Präsentation fragen",
},
story: {
- next: "Als Nächstes fragen Sie sich",
- railLabel: "Kapitel der Seite",
- chapters: [
- { id: "hello", short: "Wer", question: "Wer ist das überhaupt?" },
- { id: "services", short: "Was", question: "Kann er, was ich brauche?" },
- {
- id: "automation",
- short: "Beispiel",
- question: "Wie sieht das konkret aus?",
- },
- {
- id: "presentations",
- short: "Mehr",
- question: "Und was geht sonst noch?",
- },
- {
- id: "working",
- short: "Ablauf",
- question: "Wie läuft die Zusammenarbeit?",
- },
- { id: "work", short: "Ergebnis", question: "Hat er das schon gemacht?" },
- { id: "faq", short: "Fragen", question: "Was ist noch offen?" },
- { id: "contact", short: "Start", question: "Wie fange ich an?" },
- ],
+ hello: "Für ein Vorhaben im Web brauchen Sie jemanden, der es baut.",
+ services: "Als Erstes klären wir, was Sie wirklich brauchen.",
+ automation:
+ "Manchmal ist es gar keine neue Software, sondern weniger Handarbeit.",
+ presentations:
+ "Und manchmal ist es ein Termin, bei dem Sie überzeugen müssen.",
+ working: "Wenn klar ist, was entsteht, läuft es immer gleich ab.",
+ work: "Am Ende steht etwas, das läuft.",
+ faq: "Vorher bleiben meist ein paar Fragen.",
+ contact: "Und dann beginnt es mit einer E-Mail.",
},
freelance: {
metaTitle: "Freelance-Webentwickler für Ihr Team | Marc Mintel",
diff --git a/apps/web/src/content/en.ts b/apps/web/src/content/en.ts
index d06064d..4d6991c 100644
--- a/apps/web/src/content/en.ts
+++ b/apps/web/src/content/en.ts
@@ -472,30 +472,17 @@ export const en: Content = {
cta: "Ask about a presentation",
},
story: {
- next: "Next, you are wondering",
- railLabel: "Chapters of this page",
- chapters: [
- { id: "hello", short: "Who", question: "Who is this, anyway?" },
- { id: "services", short: "What", question: "Can he do what I need?" },
- {
- id: "automation",
- short: "Example",
- question: "What does that look like in practice?",
- },
- {
- id: "presentations",
- short: "More",
- question: "And what else is possible?",
- },
- {
- id: "working",
- short: "Process",
- question: "How does working together go?",
- },
- { id: "work", short: "Results", question: "Has he done this before?" },
- { id: "faq", short: "Questions", question: "What is still open?" },
- { id: "contact", short: "Start", question: "How do I get started?" },
- ],
+ hello: "For a project on the web you need someone who builds it.",
+ services: "First we find out what you really need.",
+ automation:
+ "Sometimes it is not new software at all, but less work by hand.",
+ presentations:
+ "And sometimes it is a meeting in which you have to convince.",
+ working:
+ "Once it is clear what will be built, it always runs the same way.",
+ work: "In the end there is something that runs.",
+ faq: "Before that, a few questions usually remain.",
+ contact: "And then it starts with an email.",
},
freelance: {
metaTitle: "Freelance web developer for your team | Marc Mintel",
diff --git a/apps/web/src/content/types.ts b/apps/web/src/content/types.ts
index ce23d0a..ae18226 100644
--- a/apps/web/src/content/types.ts
+++ b/apps/web/src/content/types.ts
@@ -130,14 +130,6 @@ export type ChapterId =
| "faq"
| "contact";
-export type StoryChapter = {
- readonly id: ChapterId;
- /** One word for the rail. */
- readonly short: string;
- /** The question of the visitor that this chapter answers. */
- readonly question: string;
-};
-
export type FaqItem = {
readonly question: string;
readonly answer: string;
@@ -249,16 +241,10 @@ export type Content = {
readonly cta: string;
};
/**
- * The story of the homepage: it follows the questions a visitor has, in the
- * order they come up. Each chapter opens with its question and ends by
- * handing over to the next one.
+ * The story of the homepage: one sentence per chapter. Read one after the
+ * other they tell the way of a project from the idea to the first email.
*/
- readonly story: {
- readonly next: string;
- /** Label of the rail that shows all chapters. */
- readonly railLabel: string;
- readonly chapters: readonly StoryChapter[];
- };
+ readonly story: Readonly>;
/** The page for people who develop themselves or lead a team. */
readonly freelance: {
readonly metaTitle: string;
diff --git a/apps/web/src/domain/chapters.spec.ts b/apps/web/src/domain/chapters.spec.ts
deleted file mode 100644
index 6c1cfe4..0000000
--- a/apps/web/src/domain/chapters.spec.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { chapterAt, storyProgress } from "./chapters";
-
-const TOPS = [1000, 2000, 5000];
-
-describe("chapterAt", () => {
- it("is no chapter above the first one", () => {
- expect(chapterAt(TOPS, 0)).toBe(-1);
- expect(chapterAt(TOPS, 999)).toBe(-1);
- });
-
- it("is the chapter whose top was passed last", () => {
- expect(chapterAt(TOPS, 1000)).toBe(0);
- expect(chapterAt(TOPS, 1999)).toBe(0);
- expect(chapterAt(TOPS, 2000)).toBe(1);
- expect(chapterAt(TOPS, 4999)).toBe(1);
- expect(chapterAt(TOPS, 5000)).toBe(2);
- expect(chapterAt(TOPS, 99999)).toBe(2);
- });
-
- it("is no chapter on a page without chapters", () => {
- expect(chapterAt([], 500)).toBe(-1);
- });
-});
-
-describe("storyProgress", () => {
- it("is 0 up to the first chapter and 1 from the end on", () => {
- expect(storyProgress(TOPS, 6000, 0)).toBe(0);
- expect(storyProgress(TOPS, 6000, 1000)).toBe(0);
- expect(storyProgress(TOPS, 6000, 6000)).toBe(1);
- expect(storyProgress(TOPS, 6000, 7000)).toBe(1);
- });
-
- it("gives every chapter the same share, however long it is", () => {
- // Three chapters: each owns a third.
- expect(storyProgress(TOPS, 6000, 2000)).toBeCloseTo(1 / 3);
- expect(storyProgress(TOPS, 6000, 5000)).toBeCloseTo(2 / 3);
- });
-
- it("moves evenly within a chapter", () => {
- // Half way through the first chapter (1000 to 2000).
- expect(storyProgress(TOPS, 6000, 1500)).toBeCloseTo(1 / 6);
- // A quarter into the long second chapter (2000 to 5000).
- expect(storyProgress(TOPS, 6000, 2750)).toBeCloseTo(1 / 3 + 1 / 12);
- // Half way through the last one, which ends at `end` (5000 to 6000).
- expect(storyProgress(TOPS, 6000, 5500)).toBeCloseTo(2 / 3 + 1 / 6);
- });
-
- it("is 0 on a page without chapters", () => {
- expect(storyProgress([], 6000, 3000)).toBe(0);
- });
-
- it("skips a chapter without height: the one after it is the current one", () => {
- // Two chapters start at the same offset; the second one runs to the end.
- expect(storyProgress([1000, 1000], 2000, 1000)).toBeCloseTo(1 / 2);
- expect(storyProgress([1000, 1000], 2000, 1500)).toBeCloseTo(3 / 4);
- });
-
- it("treats a last chapter without height as passed at once", () => {
- expect(storyProgress([1000], 1000, 1000)).toBe(1);
- expect(storyProgress([1000, 3000], 3000, 3000)).toBe(1);
- // An end above the chapter's start is no height either.
- expect(storyProgress([1000], 500, 1200)).toBe(1);
- });
-});
diff --git a/apps/web/src/domain/chapters.ts b/apps/web/src/domain/chapters.ts
deleted file mode 100644
index fd35700..0000000
--- a/apps/web/src/domain/chapters.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Where a visitor is in the story of the homepage. `tops` are the page offsets
- * at which the chapters start, in order; `y` is the offset the visitor reads at.
- */
-
-/** Index of the chapter the visitor is in, or -1 above the first chapter. */
-export function chapterAt(tops: readonly number[], y: number): number {
- return tops.filter((top) => top <= y).length - 1;
-}
-
-/**
- * How far the visitor is through the story, from 0 to 1. Every chapter owns the
- * same share however long it is, so the marker passes the stations of a rail
- * with even spacing exactly when the chapters begin. The last chapter ends at `end`.
- */
-export function storyProgress(
- tops: readonly number[],
- end: number,
- y: number,
-): number {
- const index = chapterAt(tops, y);
- const from = tops[index];
- if (from === undefined) return 0;
- const to = tops[index + 1] ?? end;
- const within = to > from ? Math.min(1, (y - from) / (to - from)) : 1;
- return (index + within) / tops.length;
-}
diff --git a/apps/web/src/domain/thread.spec.ts b/apps/web/src/domain/thread.spec.ts
new file mode 100644
index 0000000..be39b17
--- /dev/null
+++ b/apps/web/src/domain/thread.spec.ts
@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { deepestSoFar, lengthAtDepth } from "./thread";
+
+describe("deepestSoFar", () => {
+ it("keeps the lowest point the line has reached at each sample", () => {
+ // The line goes down, loops back up, and goes down again.
+ expect(deepestSoFar([10, 5, 20, 15, 30])).toEqual([10, 10, 20, 20, 30]);
+ });
+
+ it("is empty for an empty line", () => {
+ expect(deepestSoFar([])).toEqual([]);
+ });
+
+ it("works above the top of the page", () => {
+ expect(deepestSoFar([-20, -30, -10])).toEqual([-20, -20, -10]);
+ });
+});
+
+describe("lengthAtDepth", () => {
+ const depths = [10, 10, 20, 20, 30];
+
+ it("draws nothing above the start of the line", () => {
+ expect(lengthAtDepth(depths, 8, 9)).toBe(0);
+ });
+
+ it("draws everything the line needed to reach that depth, loops included", () => {
+ expect(lengthAtDepth(depths, 8, 10)).toBe(16);
+ expect(lengthAtDepth(depths, 8, 19)).toBe(16);
+ expect(lengthAtDepth(depths, 8, 20)).toBe(32);
+ });
+
+ it("draws the whole line below its end", () => {
+ expect(lengthAtDepth(depths, 8, 1000)).toBe(40);
+ });
+
+ it("draws nothing of an empty line", () => {
+ expect(lengthAtDepth([], 8, 1000)).toBe(0);
+ });
+});
diff --git a/apps/web/src/domain/thread.ts b/apps/web/src/domain/thread.ts
new file mode 100644
index 0000000..c47cf12
--- /dev/null
+++ b/apps/web/src/domain/thread.ts
@@ -0,0 +1,23 @@
+/**
+ * The story thread is a line that runs down the homepage and draws itself as
+ * the visitor scrolls. It is not straight: it loops back up to form figures.
+ * These two functions decide how much of it is drawn at a scroll depth.
+ */
+
+/** For each sample along the line: the lowest point the line has reached so far. */
+export function deepestSoFar(ys: readonly number[]): number[] {
+ return ys.map((_, index) => Math.max(...ys.slice(0, index + 1)));
+}
+
+/**
+ * How much of the line is drawn when the visitor has read down to `y`.
+ * `depths` comes from `deepestSoFar`, sampled every `step` along the line.
+ * A figure that loops back up is drawn in full once its lowest point is passed.
+ */
+export function lengthAtDepth(
+ depths: readonly number[],
+ step: number,
+ y: number,
+): number {
+ return depths.filter((depth) => depth <= y).length * step;
+}