feat: the homepage leads the visitor through as one story
The page was a row of sections to scroll past, and a film in one of them did not change that. It now follows the questions a visitor has, in the order they come up: who is this, can he do what I need, what does it look like, what else, how does it go, has he done it, what is open, how do I start. Each chapter ends by asking the next question as a large link that leads on, and the next chapter answers it. A rail at the edge shows every chapter as a station with a dot travelling along it (on phones: a pill with the current chapter and one tap to the next), and the header names the current question. Where the visitor is, is pure logic in src/domain/chapters.ts. The scroll film section and the bridge sentences are removed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -63,12 +63,12 @@ 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.
|
||||
- Scroll films live in `apps/web/src/components/film/`: `ScrollFilm` is a dark stage that stays in place
|
||||
while the visitor scrolls; scrolling is the timeline (camera, statements), a second clock keeps things
|
||||
alive when the visitor stops. They are the website form of the films in `apps/video` (same pattern: close
|
||||
on something abstract, pull back, resolve) and use their approved statements. `OrderFilm` opens the
|
||||
automation chapter. Coordinates rendered on the first frame must be rounded (see `motion.ts`), or server
|
||||
and browser disagree in the last digit.
|
||||
- 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.
|
||||
- `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`).
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { BitAura } from "@/src/components/bits/BitAura";
|
||||
import { OrderFilm } from "@/src/components/film/OrderFilm";
|
||||
import { Block } from "@/src/components/home/Block";
|
||||
import { ClosingCta } from "@/src/components/home/ClosingCta";
|
||||
import { Faq } from "@/src/components/home/Faq";
|
||||
@@ -19,9 +18,11 @@ 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 { SwipeRow } from "@/src/components/SwipeRow";
|
||||
import { contentFor } from "@/src/content";
|
||||
import type { SplitTitle } from "@/src/content/types";
|
||||
import type { ChapterId, SplitTitle } from "@/src/content/types";
|
||||
import { DEFAULT_LOCALE, parseLocale } from "@/src/domain/locale";
|
||||
import { languageAlternates, pathFor } from "@/src/domain/routes";
|
||||
|
||||
@@ -69,11 +70,28 @@ 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 (
|
||||
<div className="relative flex flex-col bg-white">
|
||||
<HomeJsonLd locale={locale} />
|
||||
<HeroStatement hero={content.hero} />
|
||||
<StickyBook />
|
||||
<StoryGuide />
|
||||
|
||||
<PortraitSection
|
||||
id="hello"
|
||||
@@ -101,13 +119,14 @@ export default async function LandingPage({ params }: Props) {
|
||||
{hello.careerLabel}
|
||||
</p>
|
||||
<CareerLine stations={hello.career} />
|
||||
{afterHello && <NextChapter {...afterHello} dark />}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Block
|
||||
index="02"
|
||||
label={services.label}
|
||||
bridge={story.services}
|
||||
{...chapter("services")}
|
||||
title={<Title title={services.title} />}
|
||||
>
|
||||
<Reveal>
|
||||
@@ -115,12 +134,10 @@ export default async function LandingPage({ params }: Props) {
|
||||
</Reveal>
|
||||
</Block>
|
||||
|
||||
<OrderFilm />
|
||||
|
||||
<Block
|
||||
index="03"
|
||||
label={automation.label}
|
||||
bridge={story.automation}
|
||||
{...chapter("automation")}
|
||||
title={<Title title={automation.title} />}
|
||||
>
|
||||
<Reveal>
|
||||
@@ -153,7 +170,7 @@ export default async function LandingPage({ params }: Props) {
|
||||
<Block
|
||||
index="04"
|
||||
label={presentations.label}
|
||||
bridge={story.presentations}
|
||||
{...chapter("presentations")}
|
||||
tone="dark"
|
||||
title={<Title title={presentations.title} muted="text-slate-500" />}
|
||||
>
|
||||
@@ -226,7 +243,7 @@ export default async function LandingPage({ params }: Props) {
|
||||
<Block
|
||||
index="05"
|
||||
label={working.label}
|
||||
bridge={story.working}
|
||||
{...chapter("working")}
|
||||
title={<Title title={working.title} />}
|
||||
>
|
||||
<Reveal>
|
||||
@@ -277,7 +294,7 @@ export default async function LandingPage({ params }: Props) {
|
||||
<Block
|
||||
index="06"
|
||||
label={work.label}
|
||||
bridge={story.work}
|
||||
{...chapter("work")}
|
||||
tone="dark"
|
||||
title={<Title title={work.title} muted="text-slate-500" />}
|
||||
>
|
||||
@@ -292,7 +309,7 @@ export default async function LandingPage({ params }: Props) {
|
||||
<Block
|
||||
index="07"
|
||||
label={faq.label}
|
||||
bridge={story.faq}
|
||||
{...chapter("faq")}
|
||||
title={<Title title={faq.title} />}
|
||||
>
|
||||
<Reveal>
|
||||
|
||||
@@ -1339,6 +1339,23 @@ pre:has(code[class*="language-"]) {
|
||||
}
|
||||
}
|
||||
|
||||
/* The story guide: the dot that travels along the chapter rail, and the header line. */
|
||||
.story-dot {
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(253, 230, 138, 0.35),
|
||||
0 0 14px 3px rgba(251, 191, 36, 0.8);
|
||||
transition: top 200ms linear;
|
||||
}
|
||||
.story-now {
|
||||
animation: story-now-in 400ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
@keyframes story-now-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Native feel: the page should behave like a well-made app on every input type.
|
||||
*/
|
||||
|
||||
@@ -9,6 +9,7 @@ import { DecodeText } from "./bits/DecodeText";
|
||||
import { ScrollBits } from "./bits/ScrollBits";
|
||||
import { useContent, useLocale } from "./ContentProvider";
|
||||
import { LanguageSwitch } from "./LanguageSwitch";
|
||||
import { ChapterNow } from "./story/StoryGuide";
|
||||
|
||||
/** Header: the logo, the link to the freelance page, the language switch and one action. */
|
||||
export const Header: React.FC = () => {
|
||||
@@ -61,7 +62,11 @@ export const Header: React.FC = () => {
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<ScrollBits className="hidden font-mono text-[10px] tracking-[0.3em] text-slate-400 md:block" />
|
||||
<ChapterNow
|
||||
fallback={
|
||||
<ScrollBits className="hidden font-mono text-[10px] tracking-[0.3em] text-slate-400 md:block" />
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-2.5 md:gap-4">
|
||||
<Link
|
||||
|
||||
@@ -1,48 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { useContent } from "@/src/components/ContentProvider";
|
||||
import { ORDER_SHOT, OrderShot } from "./OrderShot";
|
||||
import { ScrollFilm, type FilmClock } from "./ScrollFilm";
|
||||
import { progress } from "./motion";
|
||||
|
||||
/** While which frames each of the five statements stands: hook, reveal, problem, turn, calm. */
|
||||
const SLOTS = [
|
||||
{ from: 0, to: ORDER_SHOT.reveal + 20 },
|
||||
{ from: ORDER_SHOT.reveal + 30, to: ORDER_SHOT.wide + 30 },
|
||||
{ from: ORDER_SHOT.wide + 30, to: ORDER_SHOT.freeze + 20 },
|
||||
{ from: ORDER_SHOT.sink, to: ORDER_SHOT.flow + 20 },
|
||||
{ from: ORDER_SHOT.flow + 20, to: ORDER_SHOT.end },
|
||||
] as const;
|
||||
|
||||
/** The walkers' own time: it runs with the clock and slows to a halt at the freeze. */
|
||||
const Walking: React.FC<{ clock: FilmClock }> = ({ clock }) => {
|
||||
const walk = React.useRef(0);
|
||||
const seen = React.useRef(clock.live);
|
||||
if (clock.live !== seen.current) {
|
||||
seen.current = clock.live;
|
||||
walk.current +=
|
||||
clock.step *
|
||||
(1 - progress(clock.shot, ORDER_SHOT.freeze, ORDER_SHOT.freeze + 30));
|
||||
}
|
||||
return <OrderShot clock={clock} walk={walk.current} />;
|
||||
};
|
||||
|
||||
/** The opening of the automation chapter: from ping-pong to tools that talk to each other. */
|
||||
export const OrderFilm: React.FC = () => {
|
||||
const { film } = useContent().automation;
|
||||
const captions = SLOTS.map((slot, index) => ({
|
||||
...slot,
|
||||
lines: film.statements[index] ?? [],
|
||||
}));
|
||||
return (
|
||||
<ScrollFilm
|
||||
frames={ORDER_SHOT.end}
|
||||
captions={captions}
|
||||
description={film.description}
|
||||
stillFrame={ORDER_SHOT.flow + 60}
|
||||
>
|
||||
{(clock) => <Walking clock={clock} />}
|
||||
</ScrollFilm>
|
||||
);
|
||||
};
|
||||
@@ -1,235 +0,0 @@
|
||||
import * as React from "react";
|
||||
import type { FilmClock } from "./ScrollFilm";
|
||||
import { hopAt, inOut, mix, out, progress, type Point } from "./motion";
|
||||
|
||||
/**
|
||||
* The automation film as a scroll shot (twin of `OrderFilm` in apps/video).
|
||||
* Close up, a dot hops between two squares: ping-pong. The camera pulls back:
|
||||
* it is one of many, a whole office carrying things from tool to tool.
|
||||
* Everything stops, the dots sink onto a line, and the lines carry the work.
|
||||
*/
|
||||
export const ORDER_SHOT = {
|
||||
/** The camera starts to pull back. */
|
||||
reveal: 75,
|
||||
/** The whole picture is in view. */
|
||||
wide: 195,
|
||||
/** Everything slows to a halt. */
|
||||
freeze: 310,
|
||||
sink: 345,
|
||||
lines: 365,
|
||||
flow: 440,
|
||||
end: 560,
|
||||
} as const;
|
||||
|
||||
const T = ORDER_SHOT;
|
||||
const INK = "#f8fafc";
|
||||
const PAPER = "#0f172a";
|
||||
const MARK = "#fde68a";
|
||||
const LIGHT = "129, 140, 248";
|
||||
|
||||
const COLS = 4;
|
||||
const HERO_ROW = 2;
|
||||
const PITCH = { x: 220, y: 190 } as const;
|
||||
const TILE = 96;
|
||||
const ZOOM_IN = 2.6;
|
||||
const ZOOM_OUT = 0.8;
|
||||
/** Height of a hop as a share of its length. */
|
||||
const ARC = 0.22;
|
||||
const CLOSE_HOP_FRAMES = 30;
|
||||
const PULSE_EVERY = 80;
|
||||
const PULSE_FRAMES = 55;
|
||||
|
||||
const colX = (col: number): number => (col - (COLS - 1) / 2) * PITCH.x;
|
||||
const rowY = (row: number): number => (row - HERO_ROW) * PITCH.y;
|
||||
const stop = (row: number, col: number): Point => ({
|
||||
x: colX(col),
|
||||
y: rowY(row),
|
||||
});
|
||||
|
||||
/** Each row has someone carrying things round its four tools, in their own order and pace. */
|
||||
const WALKERS = [
|
||||
{ route: [0, 1, 2, 3], hopFrames: 27, offset: 7 },
|
||||
{ route: [2, 0, 3, 1], hopFrames: 32, offset: 40 },
|
||||
{ route: [1, 2, 3, 0], hopFrames: 29, offset: 0 },
|
||||
{ route: [3, 2, 1, 0], hopFrames: 25, offset: 19 },
|
||||
{ route: [1, 3, 0, 2], hopFrames: 30, offset: 55 },
|
||||
] as const;
|
||||
|
||||
const Dot: React.FC<{
|
||||
at: (back: number) => Point;
|
||||
radius: number;
|
||||
zoom: number;
|
||||
opacity: number;
|
||||
}> = ({ at, radius, zoom, opacity }) => {
|
||||
if (opacity <= 0) return null;
|
||||
const point = at(0);
|
||||
return (
|
||||
<g opacity={Math.min(1, opacity)}>
|
||||
{[1, 2, 3, 4, 5].map((k) => {
|
||||
const ghost = at(k * 2.2);
|
||||
return (
|
||||
<circle
|
||||
key={k}
|
||||
cx={ghost.x}
|
||||
cy={ghost.y}
|
||||
r={radius * (1 - k * 0.13)}
|
||||
fill={MARK}
|
||||
opacity={0.3 - k * 0.05}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<circle
|
||||
cx={point.x}
|
||||
cy={point.y}
|
||||
r={radius}
|
||||
fill={MARK}
|
||||
style={{ filter: `drop-shadow(0 0 ${12 / zoom}px ${MARK})` }}
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
};
|
||||
|
||||
/** The picture at one moment. `walk` is the walkers' own time: it stops at the freeze. */
|
||||
export const OrderShot: React.FC<{ clock: FilmClock; walk: number }> = ({
|
||||
clock,
|
||||
walk,
|
||||
}) => {
|
||||
const { shot, live } = clock;
|
||||
const back = inOut(progress(shot, T.reveal, T.wide));
|
||||
const zoom = ZOOM_IN * (ZOOM_OUT / ZOOM_IN) ** back;
|
||||
/** Everything outside the opening picture fades in as the camera pulls back. */
|
||||
const others = progress(back, 0.05, 0.5);
|
||||
const hair = 2.2 / zoom;
|
||||
const sink = inOut(progress(shot, T.sink, T.sink + 30));
|
||||
const radius = 12 / Math.sqrt(zoom);
|
||||
|
||||
return (
|
||||
<g transform={`scale(${zoom})`}>
|
||||
{WALKERS.map((walker, row) => {
|
||||
const hero = row === HERO_ROW;
|
||||
const y = rowY(row);
|
||||
const away = Math.abs(row - HERO_ROW);
|
||||
|
||||
// The line that replaces the walking.
|
||||
const lineStart = T.lines + away * 12;
|
||||
const drawn = out(progress(shot, lineStart, lineStart + 45));
|
||||
const lineEnd = mix(colX(0), colX(COLS - 1), drawn);
|
||||
|
||||
// Work travelling along the line by itself, in its own time.
|
||||
const flowing = progress(
|
||||
shot,
|
||||
T.flow + away * 10,
|
||||
T.flow + away * 10 + 10,
|
||||
);
|
||||
const pulseT = ((live + away * 23) % PULSE_EVERY) / PULSE_FRAMES;
|
||||
const pulseX =
|
||||
flowing > 0 && pulseT <= 1
|
||||
? mix(colX(0), colX(COLS - 1), inOut(pulseT))
|
||||
: null;
|
||||
|
||||
const shown =
|
||||
(hero ? 1 : others) * (1 - progress(shot, lineStart, lineStart + 18));
|
||||
const settle = (point: Point): Point => ({
|
||||
x: point.x,
|
||||
y: mix(point.y, y, sink),
|
||||
});
|
||||
const onRoute = (ago: number): Point =>
|
||||
settle(
|
||||
hopAt(
|
||||
walk - ago + walker.offset,
|
||||
walker.route.map((col) => stop(row, col)),
|
||||
walker.hopFrames,
|
||||
ARC,
|
||||
),
|
||||
);
|
||||
// While the camera is close, the one in the middle plays ping-pong between two squares.
|
||||
const pingPong = (ago: number): Point =>
|
||||
settle(
|
||||
hopAt(
|
||||
walk - ago,
|
||||
[stop(row, 1), stop(row, 2)],
|
||||
CLOSE_HOP_FRAMES,
|
||||
ARC * 1.4,
|
||||
),
|
||||
);
|
||||
const walkerNow = onRoute(0);
|
||||
|
||||
return (
|
||||
<g key={row}>
|
||||
{drawn > 0 && (
|
||||
<path
|
||||
d={`M${colX(0)} ${y}H${lineEnd}`}
|
||||
stroke={INK}
|
||||
strokeWidth={hair * 1.3}
|
||||
strokeLinecap="round"
|
||||
opacity={hero ? 1 : others}
|
||||
style={{
|
||||
filter: `drop-shadow(0 0 ${6 / zoom}px rgba(${LIGHT}, 0.9))`,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{Array.from({ length: COLS }, (_unused, col) => {
|
||||
const x = colX(col);
|
||||
const opening = hero && (col === 1 || col === 2);
|
||||
const touched =
|
||||
shown > 0.5 &&
|
||||
(!hero || others > 0.5) &&
|
||||
Math.hypot(walkerNow.x - x, walkerNow.y - y) < TILE * 0.42;
|
||||
const lit =
|
||||
pulseX === null
|
||||
? 0
|
||||
: Math.max(0, 1 - Math.abs(pulseX - x) / 110) * flowing;
|
||||
return (
|
||||
<g key={col} opacity={opening ? 1 : others}>
|
||||
<rect
|
||||
x={x - TILE / 2}
|
||||
y={y - TILE / 2}
|
||||
width={TILE}
|
||||
height={TILE}
|
||||
rx={TILE * 0.24}
|
||||
fill={PAPER}
|
||||
/>
|
||||
<rect
|
||||
x={x - TILE / 2}
|
||||
y={y - TILE / 2}
|
||||
width={TILE}
|
||||
height={TILE}
|
||||
rx={TILE * 0.24}
|
||||
fill={`rgba(248, 250, 252, ${0.1 + lit * 0.22})`}
|
||||
stroke={touched ? MARK : INK}
|
||||
strokeOpacity={touched ? 1 : 0.75 + lit * 0.25}
|
||||
strokeWidth={touched ? hair * 1.6 : hair}
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
{pulseX !== null && (
|
||||
<circle
|
||||
cx={pulseX}
|
||||
cy={y}
|
||||
r={radius * 0.8}
|
||||
fill={MARK}
|
||||
opacity={(hero ? 1 : others) * flowing}
|
||||
style={{ filter: `drop-shadow(0 0 ${10 / zoom}px ${MARK})` }}
|
||||
/>
|
||||
)}
|
||||
{hero && (
|
||||
<Dot
|
||||
at={pingPong}
|
||||
radius={radius}
|
||||
zoom={zoom}
|
||||
opacity={shown * (1 - others)}
|
||||
/>
|
||||
)}
|
||||
<Dot
|
||||
at={onRoute}
|
||||
radius={radius}
|
||||
zoom={zoom}
|
||||
opacity={hero ? shown * others : shown}
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
</g>
|
||||
);
|
||||
};
|
||||
@@ -1,218 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { progress } from "./motion";
|
||||
|
||||
/** One statement of a film: its lines, and while which frames of the shot it stands. */
|
||||
export type FilmCaption = {
|
||||
readonly lines: readonly string[];
|
||||
readonly from: number;
|
||||
readonly to: number;
|
||||
};
|
||||
|
||||
/** Two clocks: where the shot is (set by scrolling) and time that simply passes. */
|
||||
export type FilmClock = {
|
||||
/** Frame of the shot. Scrolling moves it; it stands still when the visitor does. */
|
||||
readonly shot: number;
|
||||
/** Frames at 30 per second since the film came into view. Things that live keep moving on it. */
|
||||
readonly live: number;
|
||||
/** Frames since the last tick, for things that keep their own pace. */
|
||||
readonly step: number;
|
||||
};
|
||||
|
||||
interface ScrollFilmProps {
|
||||
/** The last frame of the shot, reached when the film has been scrolled through. */
|
||||
frames: number;
|
||||
captions: readonly FilmCaption[];
|
||||
/** What the film shows, for screen readers. */
|
||||
description: string;
|
||||
/** The frame shown without motion: when reduced motion is requested. */
|
||||
stillFrame: number;
|
||||
/** The picture, as SVG content in a 1000 x 700 stage with (0, 0) in the centre. */
|
||||
children: (clock: FilmClock) => React.ReactNode;
|
||||
}
|
||||
|
||||
const STAGE = { width: 1000, height: 700 } as const;
|
||||
const FPS = 30;
|
||||
const MAX_STEP_S = 0.1;
|
||||
/** How quickly the shot follows the scroll position: lower is smoother. */
|
||||
const FOLLOW = 0.14;
|
||||
const IN_FRAMES = 14;
|
||||
const OUT_FRAMES = 10;
|
||||
const EDGE_FADE =
|
||||
"linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent)";
|
||||
|
||||
/**
|
||||
* ScrollFilm: one continuous shot on a dark stage that stays in place while the
|
||||
* visitor scrolls through it. Scrolling is the timeline: it moves the camera and
|
||||
* changes the statement. It is the website form of the social media films
|
||||
* (apps/video, `FilmStage`): one picture, one statement at a time.
|
||||
*/
|
||||
export const ScrollFilm: React.FC<ScrollFilmProps> = ({
|
||||
frames,
|
||||
captions,
|
||||
description,
|
||||
stillFrame,
|
||||
children,
|
||||
}) => {
|
||||
const trackRef = React.useRef<HTMLDivElement>(null);
|
||||
const [clock, setClock] = React.useState<FilmClock>({
|
||||
shot: 0,
|
||||
live: 0,
|
||||
step: 0,
|
||||
});
|
||||
const [still, setStill] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
const track = trackRef.current;
|
||||
if (!track) return;
|
||||
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
||||
setStill(true);
|
||||
setClock({ shot: stillFrame, live: 0, step: 0 });
|
||||
return;
|
||||
}
|
||||
|
||||
let frame = 0;
|
||||
let last = 0;
|
||||
let shot = 0;
|
||||
let live = 0;
|
||||
let visible = false;
|
||||
|
||||
const target = () => {
|
||||
const rect = track.getBoundingClientRect();
|
||||
const distance = rect.height - window.innerHeight;
|
||||
return distance <= 0 ? 0 : progress(-rect.top, 0, distance) * frames;
|
||||
};
|
||||
|
||||
const tick = (now: number) => {
|
||||
frame = window.requestAnimationFrame(tick);
|
||||
const seconds = Math.min(MAX_STEP_S, (now - last) / 1000);
|
||||
last = now;
|
||||
const step = seconds * FPS;
|
||||
live += step;
|
||||
shot += (target() - shot) * FOLLOW;
|
||||
setClock({ shot, live, step });
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(([entry]) => {
|
||||
const next = entry?.isIntersecting ?? false;
|
||||
if (next === visible) return;
|
||||
visible = next;
|
||||
if (visible) {
|
||||
last = performance.now();
|
||||
frame = window.requestAnimationFrame(tick);
|
||||
} else {
|
||||
window.cancelAnimationFrame(frame);
|
||||
}
|
||||
});
|
||||
observer.observe(track);
|
||||
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
window.cancelAnimationFrame(frame);
|
||||
};
|
||||
}, [frames, stillFrame]);
|
||||
|
||||
const { shot } = clock;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={trackRef}
|
||||
className={`relative bg-slate-900 ${still ? "" : "h-[340svh] md:h-[420svh]"}`}
|
||||
>
|
||||
<div className="sticky top-0 flex h-[100svh] flex-col items-center justify-center overflow-hidden">
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 opacity-70"
|
||||
style={{
|
||||
backgroundImage: "radial-gradient(#1e293b 1px, transparent 1px)",
|
||||
backgroundSize: "20px 20px",
|
||||
}}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div className="bit-aurora opacity-60" aria-hidden="true" />
|
||||
|
||||
<svg
|
||||
viewBox={`${-STAGE.width / 2} ${-STAGE.height / 2} ${STAGE.width} ${STAGE.height}`}
|
||||
role="img"
|
||||
aria-label={description}
|
||||
className="relative mt-16 block max-h-[46svh] w-full max-w-[1100px] flex-1 md:mt-24 md:max-h-[50svh]"
|
||||
style={{
|
||||
maskImage: EDGE_FADE,
|
||||
WebkitMaskImage: EDGE_FADE,
|
||||
maskComposite: "intersect",
|
||||
WebkitMaskComposite: "source-in",
|
||||
}}
|
||||
>
|
||||
{children(clock)}
|
||||
</svg>
|
||||
|
||||
{/* One statement at a time, in the type of the headlines. */}
|
||||
<div
|
||||
className="relative mt-4 h-[24svh] w-full px-5 text-center md:mt-8"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{captions.map((caption, index) => {
|
||||
const arrive =
|
||||
index === 0
|
||||
? 1
|
||||
: progress(shot, caption.from, caption.from + IN_FRAMES);
|
||||
const leave =
|
||||
index === captions.length - 1
|
||||
? 1
|
||||
: 1 - progress(shot, caption.to - OUT_FRAMES, caption.to);
|
||||
const opacity = still
|
||||
? stillFrame >= caption.from && stillFrame < caption.to
|
||||
? 1
|
||||
: 0
|
||||
: Math.min(arrive, leave);
|
||||
if (opacity <= 0) return null;
|
||||
return (
|
||||
<p
|
||||
key={caption.lines.join(" ")}
|
||||
className="absolute inset-x-5 top-0 m-0 font-sans text-[9.5vw] font-black leading-[1.04] tracking-tighter text-white md:text-6xl lg:text-7xl"
|
||||
style={{
|
||||
opacity,
|
||||
transform: `translateY(${(1 - arrive) * 18}px)`,
|
||||
}}
|
||||
>
|
||||
{caption.lines.map((line, i) => (
|
||||
<span
|
||||
key={line}
|
||||
className={`block ${i > 0 && i === caption.lines.length - 1 ? "text-slate-400" : ""}`}
|
||||
>
|
||||
{line}
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Where the shot is. */}
|
||||
<div
|
||||
className="absolute bottom-6 left-1/2 flex -translate-x-1/2 gap-1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{captions.map((caption) => (
|
||||
<span
|
||||
key={caption.from}
|
||||
className="h-0.5 w-8 overflow-hidden rounded-full bg-slate-700"
|
||||
>
|
||||
<span
|
||||
className="block h-full bg-white"
|
||||
style={{
|
||||
width: `${progress(shot, caption.from, caption.to) * 100}%`,
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* The statements as plain text, for screen readers and without JavaScript. */}
|
||||
<p className="sr-only">
|
||||
{captions.map((caption) => caption.lines.join(" ")).join(" ")}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,55 +0,0 @@
|
||||
/**
|
||||
* Motion helpers for the scroll films. All pure functions of a frame or a time,
|
||||
* the same ones the social media films use, so both move alike.
|
||||
*/
|
||||
|
||||
export type Point = { readonly x: number; readonly y: number };
|
||||
|
||||
const clamp01 = (value: number): number => Math.min(1, Math.max(0, value));
|
||||
|
||||
/** 0 before `from`, 1 after `to`, linear in between. */
|
||||
export const progress = (frame: number, from: number, to: number): number =>
|
||||
clamp01((frame - from) / (to - from));
|
||||
|
||||
export const mix = (from: number, to: number, t: number): number =>
|
||||
from + (to - from) * t;
|
||||
|
||||
export const inOut = (t: number): number =>
|
||||
t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
|
||||
|
||||
export const out = (t: number): number => 1 - (1 - t) ** 3;
|
||||
|
||||
const easeInOut = (t: number): number =>
|
||||
t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;
|
||||
|
||||
const round = (value: number): number => Math.round(value * 100) / 100;
|
||||
|
||||
const wrap = (index: number, length: number): number =>
|
||||
((index % length) + length) % length;
|
||||
|
||||
/**
|
||||
* Where something is that hops from stop to stop in an arc, round and round.
|
||||
* It rests on `stops[0]` at time 0 and reaches the next stop every
|
||||
* `framesPerHop`. The arc rises by `arcRatio` times the distance covered.
|
||||
*/
|
||||
export const hopAt = (
|
||||
time: number,
|
||||
stops: readonly Point[],
|
||||
framesPerHop: number,
|
||||
arcRatio: number,
|
||||
): Point => {
|
||||
const hop = Math.floor(time / framesPerHop);
|
||||
const from = stops[wrap(hop, stops.length)];
|
||||
const to = stops[wrap(hop + 1, stops.length)];
|
||||
if (!from || !to) return { x: 0, y: 0 };
|
||||
const t = easeInOut(time / framesPerHop - hop);
|
||||
const distance = Math.hypot(to.x - from.x, to.y - from.y);
|
||||
// Rounded: sine and square root differ in the last digit between the server
|
||||
// and the browser, and the first frame is rendered by both.
|
||||
return {
|
||||
x: round(mix(from.x, to.x, t)),
|
||||
y: round(
|
||||
mix(from.y, to.y, t) - Math.sin(Math.PI * t) * distance * arcRatio,
|
||||
),
|
||||
};
|
||||
};
|
||||
@@ -4,14 +4,17 @@ import { BitSeam } from "@/src/components/bits/BitSeam";
|
||||
import { BitWipe } from "@/src/components/bits/BitWipe";
|
||||
import { DecodeText } from "@/src/components/bits/DecodeText";
|
||||
import { Reveal } from "@/src/components/Reveal";
|
||||
import { ChapterThread, NextChapter } from "@/src/components/story/Chapter";
|
||||
|
||||
interface BlockProps {
|
||||
/** Two-digit section index, shown with its binary form. */
|
||||
index: string;
|
||||
label: string;
|
||||
title: React.ReactNode;
|
||||
/** One sentence that leads over from the section before (the thread of the page). */
|
||||
bridge?: string;
|
||||
/** Makes the section a chapter of the story, reachable under this id. */
|
||||
chapter?: { id: string };
|
||||
/** The chapter this one hands over to at its end. */
|
||||
next?: { id: string; label: string; question: string };
|
||||
id?: string;
|
||||
/** `dark` turns the section into a dark stage. */
|
||||
tone?: "light" | "dark";
|
||||
@@ -26,7 +29,8 @@ export const Block: React.FC<BlockProps> = ({
|
||||
index,
|
||||
label,
|
||||
title,
|
||||
bridge,
|
||||
chapter,
|
||||
next,
|
||||
id,
|
||||
tone = "light",
|
||||
children,
|
||||
@@ -34,7 +38,8 @@ export const Block: React.FC<BlockProps> = ({
|
||||
const dark = tone === "dark";
|
||||
return (
|
||||
<section
|
||||
id={id}
|
||||
id={chapter?.id ?? id}
|
||||
data-chapter={chapter?.id}
|
||||
className={`relative scroll-mt-24 border-t ${
|
||||
dark
|
||||
? "overflow-clip border-slate-800 bg-slate-900"
|
||||
@@ -53,22 +58,10 @@ export const Block: React.FC<BlockProps> = ({
|
||||
)}
|
||||
{dark && <BitSeam />}
|
||||
<div className="relative mx-auto w-full max-w-[1400px] px-5 py-14 md:px-12 md:py-36">
|
||||
{bridge && (
|
||||
<Reveal>
|
||||
<div className="-mt-14 mb-10 md:-mt-36 md:mb-20">
|
||||
<span
|
||||
className={`block h-14 w-px md:h-28 ${dark ? "bg-slate-600" : "bg-slate-300"}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p
|
||||
className={`m-0 mt-5 max-w-2xl font-sans text-xl leading-snug md:text-3xl ${
|
||||
dark ? "text-slate-300" : "text-slate-500"
|
||||
}`}
|
||||
>
|
||||
{bridge}
|
||||
</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
{chapter && (
|
||||
<div className="-mt-14 md:-mt-36">
|
||||
<ChapterThread dark={dark} />
|
||||
</div>
|
||||
)}
|
||||
<Reveal>
|
||||
<div className="mb-8 flex items-center gap-4 md:mb-12">
|
||||
@@ -99,6 +92,14 @@ export const Block: React.FC<BlockProps> = ({
|
||||
</h2>
|
||||
</BitWipe>
|
||||
<div className="mt-10 md:mt-24">{children}</div>
|
||||
{next && (
|
||||
<NextChapter
|
||||
label={next.label}
|
||||
id={next.id}
|
||||
question={next.question}
|
||||
dark={dark}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -13,6 +13,7 @@ export const ClosingCta: React.FC<{ contact: Content["contact"] }> = ({
|
||||
}) => (
|
||||
<section
|
||||
id="contact"
|
||||
data-chapter="contact"
|
||||
data-glow
|
||||
className="relative overflow-clip border-t border-slate-200 bg-slate-900 text-white"
|
||||
>
|
||||
|
||||
@@ -22,6 +22,7 @@ export const PortraitSection: React.FC<{
|
||||
}> = ({ id, index, label, title, portraitAlt, children }) => (
|
||||
<section
|
||||
id={id}
|
||||
data-chapter={id}
|
||||
className="relative scroll-mt-24 overflow-hidden bg-slate-900 text-white"
|
||||
>
|
||||
{/* Portrait: right side on wide screens, top on small ones. */}
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
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,
|
||||
}) => (
|
||||
<span
|
||||
className={`mb-10 block h-14 w-px md:mb-16 md:h-28 ${dark ? "bg-slate-600" : "bg-slate-300"}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
);
|
||||
|
||||
/**
|
||||
* 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 }) => (
|
||||
<Reveal>
|
||||
<a
|
||||
href={`#${id}`}
|
||||
className={`group mt-16 flex items-end justify-between gap-6 border-t pt-8 no-underline md:mt-28 md:pt-12 ${
|
||||
dark ? "border-slate-700" : "border-slate-200"
|
||||
}`}
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
className={`block font-mono text-[11px] uppercase tracking-[0.25em] ${dark ? "text-slate-400" : "text-slate-500"}`}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
<span
|
||||
className={`mt-3 block font-sans text-2xl font-bold leading-tight tracking-tight md:text-5xl ${
|
||||
dark ? "text-white" : "text-slate-900"
|
||||
}`}
|
||||
>
|
||||
{question}
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`grid h-12 w-12 shrink-0 place-items-center rounded-full border text-xl transition-all duration-300 group-hover:translate-y-1 md:h-16 md:w-16 md:text-2xl ${
|
||||
dark
|
||||
? "border-slate-600 text-white group-hover:border-white group-hover:bg-white group-hover:text-slate-900"
|
||||
: "border-slate-300 text-slate-900 group-hover:border-slate-900 group-hover:bg-slate-900 group-hover:text-white"
|
||||
}`}
|
||||
>
|
||||
↓
|
||||
</span>
|
||||
</a>
|
||||
</Reveal>
|
||||
);
|
||||
@@ -0,0 +1,139 @@
|
||||
"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 (
|
||||
<>
|
||||
<nav
|
||||
aria-label={story.railLabel}
|
||||
className={`fixed left-3 top-1/2 z-[80] hidden -translate-y-1/2 rounded-full border border-slate-200 bg-white/85 px-3 py-5 shadow-lg shadow-slate-900/10 backdrop-blur-md transition-all duration-500 lg:block ${
|
||||
shown ? "opacity-100" : "pointer-events-none -translate-x-4 opacity-0"
|
||||
}`}
|
||||
>
|
||||
<div className="relative w-3" style={{ height: RAIL_HEIGHT }}>
|
||||
<span
|
||||
className="absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-slate-200"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span
|
||||
className="absolute left-1/2 top-0 w-px -translate-x-1/2 bg-slate-900"
|
||||
style={{ height: `${along * 100}%` }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{chapters.map((chapter, i) => {
|
||||
const passed = i <= index;
|
||||
const active = i === index;
|
||||
return (
|
||||
<button
|
||||
key={chapter.id}
|
||||
type="button"
|
||||
aria-current={active ? "step" : undefined}
|
||||
onClick={() => goTo(chapter.id)}
|
||||
className="group absolute left-1/2 flex h-5 w-5 -translate-x-1/2 -translate-y-1/2 items-center justify-center"
|
||||
style={{ top: `${(i / last) * 100}%` }}
|
||||
>
|
||||
<span
|
||||
className={`block rounded-full border transition-all duration-300 ${
|
||||
active
|
||||
? "h-3 w-3 border-slate-900 bg-slate-900"
|
||||
: passed
|
||||
? "h-2 w-2 border-slate-900 bg-slate-900"
|
||||
: "h-2 w-2 border-slate-300 bg-white group-hover:border-slate-900"
|
||||
}`}
|
||||
/>
|
||||
<span
|
||||
className={`pointer-events-none absolute left-full ml-4 whitespace-nowrap rounded-full bg-slate-900 px-3 py-1.5 font-mono text-[10px] uppercase tracking-[0.18em] text-white transition-opacity duration-200 ${
|
||||
active
|
||||
? "opacity-0 group-hover:opacity-100"
|
||||
: "opacity-0 group-hover:opacity-100"
|
||||
}`}
|
||||
>
|
||||
{String(i + 1).padStart(2, "0")} · {chapter.short}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<span
|
||||
className="story-dot absolute left-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-300"
|
||||
style={{ top: `${along * 100}%` }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Phones: where you are, and one tap to the next chapter. */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => next && goTo(next.id)}
|
||||
disabled={!next}
|
||||
className={`fixed bottom-5 left-4 z-[80] flex items-center gap-3 rounded-full border border-slate-200 bg-white/90 py-2 pl-4 pr-2 shadow-lg shadow-slate-900/10 backdrop-blur-md transition-all duration-500 lg:hidden ${
|
||||
shown && current
|
||||
? "opacity-100"
|
||||
: "pointer-events-none translate-y-4 opacity-0"
|
||||
}`}
|
||||
>
|
||||
<span className="font-mono text-[10px] font-bold uppercase tracking-[0.16em] text-slate-900">
|
||||
{index + 1}/{chapters.length} · {current?.short}
|
||||
</span>
|
||||
{next && (
|
||||
<span className="flex items-center gap-2 rounded-full bg-slate-900 px-3 py-1.5 font-mono text-[10px] uppercase tracking-[0.16em] text-white">
|
||||
{next.short}
|
||||
<span aria-hidden="true">↓</span>
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
/** 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 (
|
||||
<span
|
||||
key={current.id}
|
||||
className="story-now hidden items-center gap-3 font-mono text-[10px] uppercase tracking-[0.2em] text-slate-500 md:flex"
|
||||
>
|
||||
<span className="font-bold text-slate-900">
|
||||
{String(index + 1).padStart(2, "0")}/
|
||||
{String(chapters.length).padStart(2, "0")}
|
||||
</span>
|
||||
<span className="h-px w-6 bg-slate-300" aria-hidden="true" />
|
||||
{current.question}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,74 @@
|
||||
"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<StoryPosition>(NOWHERE);
|
||||
|
||||
React.useEffect(() => {
|
||||
let frame = 0;
|
||||
|
||||
const measure = () => {
|
||||
frame = 0;
|
||||
const sections = Array.from(
|
||||
document.querySelectorAll<HTMLElement>(`[${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;
|
||||
};
|
||||
+24
-17
@@ -277,17 +277,6 @@ export const de: Content = {
|
||||
},
|
||||
},
|
||||
automation: {
|
||||
film: {
|
||||
description:
|
||||
"Ein Punkt springt zwischen zwei Quadraten hin und her. Die Kamera fährt zurück: Es sind viele Reihen, in denen jemand Dinge von Programm zu Programm trägt. Dann verbinden Linien die Programme, und die Arbeit läuft von selbst.",
|
||||
statements: [
|
||||
["Sieht aus wie", "Pingpong."],
|
||||
["Ist aber", "Ihr Büro."],
|
||||
["Jede Bestellung.", "Von Hand."],
|
||||
["Oder Ihre Tools", "reden miteinander."],
|
||||
["Und Ihr Team", "hat Zeit."],
|
||||
],
|
||||
},
|
||||
label: "Prozessautomatisierung",
|
||||
title: { lead: "Lassen Sie die Systeme", rest: "das Kopieren übernehmen." },
|
||||
intro:
|
||||
@@ -495,12 +484,30 @@ export const de: Content = {
|
||||
cta: "Nach einer Präsentation fragen",
|
||||
},
|
||||
story: {
|
||||
services: "So viel zu mir. Jetzt zu Ihnen.",
|
||||
automation: "Einen dieser Fälle zeige ich genauer.",
|
||||
presentations: "Und manchmal ist das Richtige gar keine App.",
|
||||
working: "Egal, was Sie brauchen: So läuft die Zusammenarbeit.",
|
||||
work: "Und so sieht das Ergebnis aus.",
|
||||
faq: "Bleiben die Fragen, die fast immer kommen.",
|
||||
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?" },
|
||||
],
|
||||
},
|
||||
freelance: {
|
||||
metaTitle: "Freelance-Webentwickler für Ihr Team | Marc Mintel",
|
||||
|
||||
+24
-17
@@ -273,17 +273,6 @@ export const en: Content = {
|
||||
},
|
||||
},
|
||||
automation: {
|
||||
film: {
|
||||
description:
|
||||
"A dot hops back and forth between two squares. The camera pulls back: there are many rows in which someone carries things from tool to tool. Then lines connect the tools and the work runs by itself.",
|
||||
statements: [
|
||||
["Looks like", "ping-pong."],
|
||||
["It's your", "office."],
|
||||
["Every order.", "By hand."],
|
||||
["Or your tools", "talk to each other."],
|
||||
["And your team", "has time."],
|
||||
],
|
||||
},
|
||||
label: "Process automation",
|
||||
title: { lead: "Let the systems", rest: "do the copying." },
|
||||
intro:
|
||||
@@ -483,12 +472,30 @@ export const en: Content = {
|
||||
cta: "Ask about a presentation",
|
||||
},
|
||||
story: {
|
||||
services: "That is me. Now to you.",
|
||||
automation: "One of these cases, shown in more detail.",
|
||||
presentations: "And sometimes the right thing is not an app at all.",
|
||||
working: "Whatever you need: this is how working together goes.",
|
||||
work: "And this is what the result looks like.",
|
||||
faq: "That leaves the questions that almost always come up.",
|
||||
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?" },
|
||||
],
|
||||
},
|
||||
freelance: {
|
||||
metaTitle: "Freelance web developer for your team | Marc Mintel",
|
||||
|
||||
@@ -120,6 +120,24 @@ export type WorkCopy = {
|
||||
readonly tech: readonly string[];
|
||||
};
|
||||
|
||||
export type ChapterId =
|
||||
| "hello"
|
||||
| "services"
|
||||
| "automation"
|
||||
| "presentations"
|
||||
| "working"
|
||||
| "work"
|
||||
| "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;
|
||||
@@ -194,11 +212,6 @@ export type Content = {
|
||||
readonly scenes: SceneLabels;
|
||||
};
|
||||
readonly automation: {
|
||||
/** The film that opens the chapter: what it shows, and its five statements in order. */
|
||||
readonly film: {
|
||||
readonly description: string;
|
||||
readonly statements: readonly (readonly string[])[];
|
||||
};
|
||||
readonly label: string;
|
||||
readonly title: SplitTitle;
|
||||
readonly intro: string;
|
||||
@@ -236,16 +249,15 @@ export type Content = {
|
||||
readonly cta: string;
|
||||
};
|
||||
/**
|
||||
* The thread through the homepage: one sentence at the top of each section
|
||||
* that leads over from the one before, so the page reads as one story.
|
||||
* 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.
|
||||
*/
|
||||
readonly story: {
|
||||
readonly services: string;
|
||||
readonly automation: string;
|
||||
readonly presentations: string;
|
||||
readonly working: string;
|
||||
readonly work: string;
|
||||
readonly faq: string;
|
||||
readonly next: string;
|
||||
/** Label of the rail that shows all chapters. */
|
||||
readonly railLabel: string;
|
||||
readonly chapters: readonly StoryChapter[];
|
||||
};
|
||||
/** The page for people who develop themselves or lead a team. */
|
||||
readonly freelance: {
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
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);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,27 @@
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
Reference in New Issue
Block a user