Werkstatt

Nicht Portfolio. Werkbank.

Was hier gebaut wurde, um die Seite zu bauen.

1. 

   

   001/ 2026WebGL2 · Shadergebaut

   Lichtfeld

   Drei Lichtbänder auf einer Achse, eine harte Kante, Korn gegen Streifen — gerechnet statt geladen: kein Fremdcode, keine Textur, keine Datei.

   Dieselbe Fläche in zwei Fassungen, hell und dunkel; auf der Startseite steht sie im Titelbild, unter zwei Leitsätzen und hinter der Kontaktkarte. Gezeichnet wird nur, solange die Fläche im Fenster ist; bei Bewegungsruhe steht ein Bild.

   

   Belegscratchpad/hero_shader/hero.frag · public/hero.js
2. 01 Bauen bestanden 02 Vollständigkeit bestanden 03 Nichts Privates im Upload bestanden 04 Kein Fremdaufruf bestanden 05 Kein eingebetteter Stilblock bestanden 06 Marker und Rechtstexte bestanden 07 Kein Inline-Skript im gebauten Stand bestanden 08 Kein unsafe-inline in script-src bestanden

   002/ 2026Bauprüfunggebaut

   Der Bau hält an

   Acht Schritte am gebauten Stand, nicht am Quelltext: Vollständigkeit, nichts Privates, kein Fremdaufruf, kein Stilblock, keine Marker, kein Inline-Skript, kein unsafe-inline. Fällt einer durch, geht nichts online.

   Dazu rechnet scripts/messwerte.mjs nach jedem Bau die sechs Zahlen der Startseite aus ihren Quellen neu aus. Stimmt eine nicht mehr, bricht der Bau ab — eine falsche Zahl kann nicht online gehen, sie kann nur den Bau anhalten.

   Belegscripts/pruefen.sh · scripts/messwerte.mjs
3. Content-Security-Policy: default-src 'none' script-src 'self' style-src 'self' 'unsafe-inline' style-src-elem 'self' style-src-attr 'unsafe-inline' img-src 'self' media-src 'self' font-src 'self' connect-src 'none' base-uri 'none' form-action 'none' frame-ancestors 'none'

   003/ 2026Baugebaut

   Next ohne React ausliefern

   Diese Seite ist mit Next gebaut und kommt ohne React an: entkernen.mjs nimmt nach dem Bau das Bündel, den Flight-Strom und jeden Inline-Block aus out/. Was bleibt, ist HTML, CSS, eine Schrift und drei eigene Skripte.

   Deshalb bleibt die Inhaltsrichtlinie bei script-src 'self' — ohne Hashes, ohne unsafe-inline — und der Browser setzt durch, was die Datenschutzerklärung zusagt. Der Schritt bricht ab, sobald irgendwo ein „use client" steht.

   Belegscripts/entkernen.mjs · scripts/csp-hashes.mjs · public/.htaccess
4. 

   004/ 2026Filmgebaut

   Ein Trailer aus HTML

   Der Amtsorakel-Trailer ist eine HTML-Seite, die jedes Bild aus seiner Sekunde rechnet. Chrome liefert die Einzelbilder über das DevTools-Protokoll, AVFoundation setzt sie zu H.264 zusammen — ohne Puppeteer, ohne ffmpeg.

   Die Briefe sind DIN-5008-Schreiben aus Balken, das Telefon ein Gerät aus Verläufen mit echten Amtsorakel-Bildschirmen; Knicks, der Briefbogen, ist die Figur von Amtsorakel. Auf der Startseite läuft der Schnitt stumm in der Projektkarte.

   Belegscratchpad/trailer-li/film_bauen.py · cdp.mjs · bilder.mjs · video.swift
5. wartet

   005/ 2026Markewartet

   Das Zeichen

   Was auf dem Weg zu „Versatz" verworfen wurde, und warum: ein unterbrochener Ring liest sich als Ladeanzeige, ein Punktraster als App-Starter. Folgt.

   Beleghexese-brand/CI.md · hexese-brand/auswahl-09-2026/LIESMICH.md
6. wartet

   006/ 2026SVG · Filmwartet

   Erklärfilm ohne Videodatei

   Der Erklärfilm von amtsorakel.de ist eine SVG-Bühne mit einer Zeitleiste: elf Szenen, Untertitel in zehn Sprachen, keine Videodatei. Folgt.

   Belegamtsorakel/next-website/src/components/Erklaerfilm.tsx · public/film.js
7. wartet

   007/ 2026Tonwartet

   Die Stimmenkette

   Wie eine Aufnahme an ihren Pausen zerlegt und Satz für Satz auf die Bildwechsel gelegt wird. Folgt, sobald die Spur eingebaut ist.

   Belegscratchpad/trailer-li/vorschau.py