Naar inhoud

Guide

Hoe deze droom gemaakt is

Van een enkel gegenereerd beeld tot een film die je met je scroll bestuurt, en hoe je dat zelf op Cloudflare Pages zet.

  1. 01

    Een beeld dromen

    Lucid begon met een enkel stilstaand beeld: een kathedraal van drijvende zijde met een gloeiend venster als brandpunt. Dat beeld werd gegenereerd met een beeldmodel (Higgsfield, nano-banana), gestuurd door een zorgvuldig geschreven prompt over kleur, licht en sfeer.

    Uit twee varianten koos ik het beeld met de sterkste dieptewerking: voorgrond-zijde, middenveld-duinen, achtergrond-bogen en een warm venster in het hart.

  2. 02

    Het beeld tot leven wekken

    Dat stilstaande beeld werd geanimeerd met Higgsfield Kling 3.0 (image-to-video): een trage, ononderbroken voorwaartse camera, zijde die zacht golft, stof dat door de lichtstralen drijft. Vijf seconden, zonder cuts, in een tempo.

  3. 03

    Film wordt scroll

    De film werd met ffmpeg opgeknipt in 121 WebP-frames, in twee maten: een scherpe set voor desktop en een lichtere voor mobiel. Samen minder dan 3 MB per set.

    Een canvas tekent per scroll-positie het juiste frame, met een lichte LERP-smoothing zodat de beweging gewicht krijgt. Kritieke frames laden eerst met een poster, de rest in batches. Reduced-motion toont enkel het poster-frame, statisch.

  4. 04

    Drie iteration-passes

    Na de eerste bouw: pass 1 jaagt op defecten (leesbaarheid van tekst boven de film, laadvolgorde, timing), pass 2 verrijkt (dwell-ritme, sfeerlagen, micro-overgangen), pass 3 snoeit tot alles een stem spreekt. Pas daarna zag een mens de site.

Naar Cloudflare Pages

De site is volledig statisch, dus hosten is gratis en snel.

  1. 01ffmpeg -i film.mp4 -vf scale=1280:720 -c:v libwebp frames/frame-%04d.webp

    Knip de film in genummerde WebP-frames (plus een lichtere mobiele set).

  2. 02npm run build

    Bouw de statische site. Astro hasht de inline scripts/styles in een strikte Content-Security-Policy.

  3. 03npx wrangler login

    Koppel je Cloudflare-account eenmalig.

  4. 04npx wrangler pages deploy dist --project-name lucid --branch main

    Publiceer naar Cloudflare Pages. Je krijgt meteen een live URL op *.pages.dev, gratis en op de EU-edge.

De exacte prompts staan op de prompts-pagina.