Eden
Un plan de six secondes qui se déroule à la vitesse où l'on descend.
Le site, en direct
Le vrai site, dans le cadre : faites-le défiler pour le visiter. Sortez du cadre pour reprendre la lecture de cette page.
Points forts
Un film au défilement, sans lecteur vidéo
145 images et autant de caches d'opacité, appelés par la position de défilement, en avant comme en arrière. Aucun élément vidéo dans la page : le geste du visiteur est la seule horloge, et deux canvas superposés reçoivent le fond et le premier plan détouré.
Tout se prépare hors du fil principal
Un worker décode chaque paire, y calcule le halo (seuil de luminance, flou, fusion en écran, sur une réduction à 960 px) et découpe le premier plan, puis transfère deux ImageBitmap au lieu de les copier. Le fil qui écoute le défilement ne fait plus que dessiner.
Mémoire bornée, aucun saut de rattrapage
Douze paires décodées au maximum, les plus lointaines fermées explicitement. Et l'animation n'avance que si la paire suivante est prête : après un défaut de cache elle repart d'où elle en était, au lieu de rattraper dix images d'un coup.
15,3 Mo pour la séquence entière
Contre 32,8 avant réencodage. WebP qualité 74 pour les images, sans perte pour les caches d'opacité, et un préchargement à quatre requêtes en parallèle qui ne décode rien au passage.
Détourage suivi sur les 145 images
Les silhouettes et les chaises viennent d'un suivi Resolve, exporté en deux rendus, l'un sur blanc et l'autre sur noir : la soustraction des deux redonne l'opacité réelle, bords compris. Toutes les couleurs visibles restent celles du plan d'origine.
Fichiers statiques, aucune dépendance
Du HTML, du CSS, trois scripts et un worker, publiés tels quels, sans étape de compilation. Le mouvement réduit du système est respecté : ni halo à la dérive, ni préchargement, le jardin reste immobile.
Questions
- L'aperçu de cette page est-il le vrai site ?
- Oui, c'est le site lui-même, rendu dans le cadre : on le visite dedans, on en sort pour reprendre la lecture de cette page. Dans le catalogue, en revanche, la carte montre son plan d'ouverture, immobile tant qu'on ne le survole pas.
- En quelle langue est le site ?
- En anglais, et il n'en change pas.
- D'où viennent les images ?
- D'un plan de six secondes en 3856 x 2148, 24 images par seconde, découpé au studio : 145 images réencodées à 1536 pixels de large, et autant de caches d'opacité tirés du suivi. Les masters pleine résolution sont conservés. La cueillette est une seconde séquence, traitée de la même façon.
- Ça se lit sur téléphone ?
- Oui. La distance d'épinglage se raccourcit, les textes reprennent la colonne, et le film garde son geste. L'aperçu de cette page, lui, ne se charge qu'à partir d'un écran d'ordinateur : un site de bureau réduit sur un téléphone ne se lirait plus.
Stack technique
- HTML
- CSS
- JavaScript
- Canvas
- Web Worker
- Vercel