Film
Motion design : l'arche se trace, devient terminal, atelier à plugins, orchestre, puis revient.
En bref
Un film court de motion design : l'arche du logo se trace, devient terminal, atelier à plugins, orchestre, puis revient. Le lecteur est natif et démarre quand vous le décidez. C'est une pièce regardée, pas une manipulation.
Ce qu'on y voit
Motion design : l'arche se trace, devient terminal, atelier à plugins, orchestre, puis revient.
L'idée
Une seule forme qui ne se coupe jamais : l'arche du logo se transforme d'un état à l'autre, pilotée par un curseur, comme une interface qu'on manipule.
La fabrication
Composé en React avec Remotion ; champ de points 3D en three.js, timeline du terminal en GSAP positionnée image par image, ressorts partout ; rendu en images puis encodé avec ffmpeg en H.264 et VP9.
Sous le capot
4 points d'implémentationPile
- Remotion
- three.js
- GSAP
- WebM / VP9
- MP4 / H.264
Fichiers
components/work/Showreel.tsxvideo/src/showreel/Showreel.tsxvideo/src/showreel/ArchField.tsxvideo/src/showreel/plan.ts
Implémentation
- Le film est composé en React avec Remotion : chaque scène est une séquence d'images, rendue hors navigateur puis encodée.
- Le champ de points de l'arche est calculé en three.js (grille échantillonnée, carrés instanciés face caméra) ; certaines timelines sont pilotées par GSAP image par image.
- Deux encodages sont servis en <video> : WebM/VP9 d'abord, MP4/H.264 en repli ; l'affiche WebP évite de charger la vidéo avant lecture.
- Le lecteur utilise preload=none et les contrôles natifs ; aucune lecture automatique, aucun son au chargement.