Nehmen Sie mit, was Ihnen nützt

Die Gestaltungsmarken

Farben, Abstände, Schriftgrößen, Radien und Schatten von A2 Lumina — hell und dunkel. Das ist die Datei, aus der diese Seite jede einzelne Farbe bezieht.

/* ==========================================================================
   A2 Lumina — Design Tokens
   Profil v3.0: das Geist-Designsystem von Vercel, Wert für Wert.

   ────────────────────────────────────────────────────────────────────────────
   WOHER DIE WERTE KOMMEN

   Die Rampen, Schatten, Maße und Schriftgrade in dieser Datei sind nicht
   nachempfunden, sondern die tatsächlichen Werte des Geist-Designsystems,
   ausgelesen aus den Custom Properties von vercel.com/design in beiden
   Schemata. Sie stehen in derselben Schreibweise wie dort (`hsla`), damit
   ein Abgleich Zeile für Zeile möglich bleibt und keine Umrechnung eine
   stille Abweichung einführt.

Die Bewegungsmarken

Dauern und Beschleunigungskurven, damit Bewegung im ganzen System gleich aussieht. Enthält die Regeln für Bewegungsreduktion gleich mit.

/* ==========================================================================
   A2 Lumina — Bewegung

   Die Tokens dafür gibt es seit jeher: fünf Dauern, drei Beschleunigungen.
   Was fehlte, war die Schicht darüber — und deshalb hat jedes Projekt seine
   Übergänge selbst erfunden, meist mit geratenen Zahlen wie `.15s ease`.

   DREI REGELN, und sie sind nicht verhandelbar:

   1. **Bewegung erklärt, sie schmückt nicht.** Etwas bewegt sich, wenn der
      Weg eine Auskunft trägt: woher es kommt, wohin es geht, dass es
      dazugehört. Ein Element, das ohne Grund hereinfliegt, kostet
      Aufmerksamkeit und gibt nichts zurück.

Der Zeichensatz

Vierzig Zeichen als ein SVG-Sprite. Einmal einbinden, danach über den Namen ansprechen — keine Schriftart, keine vierzig Einzelabrufe.

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<!-- ==========================================================================
     A2 Lumina — Zeichensatz

     Erzeugt von build_icons.py. NICHT VON HAND ÄNDERN: Wer ein Zeichen
     ergänzen oder tauschen will, trägt es dort in AUSWAHL ein und baut neu.

     Grundlage: Lucide 1.28.0 (ISC) — Lizenz in vendor/lucide/LICENSE.
     Angepasst an die Handschrift der Marke: geschnittene Terminals statt
     runder Kappen, klare Ecken statt runder Ecken, Strichstärke 1.75 statt 2.
     Dieselbe Handschrift wie die geschnittenen Terminals an E, F, S und R
     in A2 Lumina Sans.

     Einbinden:  <svg class="a2-icon"><use href="icons.svg#a2-check"/></svg>

Der Shader dieser Seite

Der Verlauf hinter jedem Seitenkopf: ein WebGL2-Fragmentshader mit domänenverzerrtem fBm, rund hundertfünfzig Zeilen. Die Farben kommen aus den Gestaltungsmarken, nicht aus dem Shader.

"use client";

import { useEffect, useRef } from "react";

/**
 * Ein Farbfeld aus einem Fragment-Shader hinter der Bühne.
 *
 * ── WARUM ROHES WEBGL UND KEIN THREE.JS ─────────────────────────────────────
 *
 * Three.js ist eine 3D-Bibliothek: Szenengraph, Kamera, Licht, Material,
 * Lader. Hier wird nichts davon gebraucht — es gibt genau ein Rechteck, das
 * den Ausschnitt füllt, und einen Shader, der jedem Bildpunkt eine Farbe
 * gibt. Das sind zwei Dreiecke. Three.js dafür zu laden hieße, 600 kB für
 * einen Aufruf mitzuschleppen, den man in achtzig Zeilen selbst schreibt.

Die Rechnungen aus dem Labor

Vorzerlegung nach dem Muster von cl100k_base, skalierte Punktprodukt-Aufmerksamkeit und Nachbarschaftssuche. Ohne Abhängigkeiten, ohne React — die Funktionen, die Labor und Führung antreiben.

/**
 * Die Rechnungen hinter Labor und Führung — an einer Stelle.
 *
 * ── WARUM NICHT JE EINMAL DORT, WO SIE GEBRAUCHT WERDEN ─────────────────────
 *
 * Das Labor und die Führung zeigen dieselben drei Dinge in zwei Formen: einmal
 * zum Selbstbedienen, einmal als Vorführung beim Scrollen. Stünde die Softmax
 * zweimal im Quelltext, wären es zwei Aussagen, die beim ersten Ändern
 * auseinanderlaufen — und die Seite behauptete an zwei Stellen etwas
 * Verschiedenes über dieselbe Sache.
 *
 * Hier steht keine Anzeige und kein React. Reine Funktionen, die sich
 * nachrechnen lassen.
 */