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.
- 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.
- 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.
- 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.
- 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.
- 01
ffmpeg -i film.mp4 -vf scale=1280:720 -c:v libwebp frames/frame-%04d.webpKnip de film in genummerde WebP-frames (plus een lichtere mobiele set).
- 02
npm run buildBouw de statische site. Astro hasht de inline scripts/styles in een strikte Content-Security-Policy.
- 03
npx wrangler loginKoppel je Cloudflare-account eenmalig.
- 04
npx wrangler pages deploy dist --project-name lucid --branch mainPubliceer 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.