Maker's guide
Hoe dit gemaakt is
Nigredo is een Weblify Signature-showcase, ontworpen en gebouwd door Claude (Opus 4.8). De hele pagina rust op één cinematische inktbloei. Hieronder de volledige methode, en je kuntelke prompt lezen die haar voortbracht.
Het idee
De hele site is één beeld: een druppel inkt die openbloeit in water. Dat is geen effect dat je op een productfoto vangt, dus werd het de drager van de pagina. Je scrollt niet langs de inkt, je duwt hem, en op het keerpunt komt de verborgen kleur boven (nigredo naar rubedo).
De film
De inkt-in-water film is gegenereerd met Higgsfield (Kling 3.0 Turbo): een enkele druppel zwarte inkt in stil water, traag openbloeiend, met een gloed van diep karmijn en oud goud die halverwege bovenkomt. Twee takes, waarvan de sterkste (met god-rays en een echte kleuromkering) gecureerd is. Vermeld conform de EU AI Act.
Van film naar scroll
De film is met ffmpeg in WebP-frames geknipt (91 desktop, 61 mobiel, samen nog geen 2,5 MB) en wordt frame per frame op een sticky canvas getekend, gestuurd door je scroll-positie met een LERP-demping voor een cinematische dwell. Kritieke frames laden eerst zodat de poster meteen staat, de rest volgt in parallelle batches, off-thread gedecodeerd.
De tekst uit de diffusie
Boven de film liggen tekst-beats die cross-faden op scroll-fracties: de opening, de plons, de bloei en de rubedo-omkering. Een klein script leest de scroll-progressie van de hero en laat telkens de dichtstbijzijnde beat oplichten, zodat de woorden uit de inkt lijken op te komen.
Het witte breekpunt
Na de zwarte afdaling breekt een bone-kleurige sectie (de albedo, de witting) het donker open: daar staan de drie inkten met hun echte specs. Die kleurbreuk is bewust, en dwingt de contrast-discipline af, want de tekst wisselt van licht-op-zwart naar donker-op-bone.
De stack
Astro en Tailwind, geen client-framework. Alle motion in externe scripts die Astro in een strikte hash-CSP hasht: geen inline-styles of handlers. Self-hosted variabele fonts (Fraunces, Hanken Grotesk, JetBrains Mono). Gedeployed als statische bestanden op Cloudflare Pages.
Reproduceer het
- 1.Scaffold een Astro + Tailwind-site met een strikte, gehashte CSP.
- 2.Genereer een inkt-in-water film (Higgsfield/Kling), cureer de beste take.
- 3.Knip met ffmpeg naar WebP-frames (desktop + kleinere mobiele set) + manifest.json.
- 4.Scrub de frames op een sticky canvas op scroll met LERP-dwell; laad kritieke frames eerst.
- 5.Cross-fade tekst-beats op scroll-fracties; breek het zwart met een bone-albedo-sectie.
- 6.Deploy statisch naar Cloudflare Pages met --branch main.
Fictief showcase-atelier. Alle inkt-specs zijn verzonnen; de inktfilm is AI-gegenereerd (Higgsfield, Kling 3.0 Turbo).