---
name: site-cinematique
description: Construit un site dont le haut de page est un plan cinématique continu qui défile avec le scroll — la caméra avance dans un seul mouvement (un produit, une matière, un lieu) jusqu'à révéler la marque, puis la page classique prend le relais. Deux voies possibles — animation pure en code (gratuite, sans compte externe) ou vidéo générée par IA (nécessite un compte et des crédits sur un outil comme Higgsfield). Se déclenche quand l'utilisateur dit "site en scroll cinématique", "page d'accueil avec une vidéo qui défile", "un site comme un film continu", ou veut une expérience de scroll immersive plutôt qu'une page classique.
---

# Site cinématique — Sales Experienz

Un site cinématique n'est pas une vidéo posée sur une page : c'est **un seul plan continu** qui commence en haut du site et se déroule au rythme du scroll du visiteur, comme une caméra qui avance sans jamais couper. Il se termine en douceur dans le contenu classique de la page (services, preuves, contact).

## Les deux voies

| | Animation en code (par défaut) | Vidéo générée par IA (optionnel) |
|---|---|---|
| Ce que c'est | Mouvement construit en HTML/CSS/JavaScript : zoom, parallaxe, révélation progressive du texte | Un vrai film court, généré avec un outil d'IA vidéo à partir d'images de départ |
| Coût | Gratuit, aucun compte requis | Nécessite un compte et des crédits sur l'outil choisi (ex. Higgsfield) |
| Quand la choisir | Toujours possible, marche pour n'importe quel projet | Quand l'effet recherché est un vrai film (un produit filmé sous tous les angles, une matière qui se transforme) |

**Par défaut, partir sur l'animation en code.** Ne proposer la vidéo générée que si le client a déjà accès à un outil d'IA vidéo et des crédits disponibles.

## Verrouiller la charte avant de commencer

Comme pour toute conception dans Claude Design (voir Section 01 de ce guide), transmettre la palette de couleurs, la ou les polices et le ton de la marque comme des contraintes non négociables — sinon le plan cinématique invente sa propre direction visuelle, souvent en décalage avec le reste du site. Le plan doit ressembler à un prolongement de la marque, pas à une pièce rapportée.

## Méthode — avant de construire quoi que ce soit

1. **Demander le point de départ et le point d'arrivée du mouvement**, en une phrase : d'où part la caméra, où elle finit. Exemple : « on ouvre sur un flacon de sérum posé sur du marbre, la caméra plonge dedans jusqu'à révéler le logo de la marque ». C'est le cœur de tout le reste — sans cette trajectoire claire, le résultat ressemble à une suite de scènes sans lien.
2. **Une seule direction de mouvement du début à la fin.** Si la caméra avance, elle avance tout du long — elle ne recule pas au milieu pour repartir en avant ensuite, sauf si ce changement de sens est lui-même l'idée (ex. : on descend au fond d'une bouteille puis on en ressort — dans ce cas, le dire explicitement).
3. **Découper en scènes courtes plutôt qu'une seule longue scène.** Une scène qui doit changer de lieu, d'échelle et de lumière en même temps « saute » visuellement au lieu de donner l'impression de voyager. Mieux vaut trois scènes courtes qui avancent chacune un peu, qu'une seule scène qui essaie de tout faire d'un coup.
4. **Ce qui vient après le plan cinématique.** Le scroll continue ensuite dans une page normale (services, preuves, tarifs, contact) — décrire cette suite avant de commencer, pour que la transition entre le film et le reste du site soit préparée dès le départ, pas ajoutée après coup.
5. **Viser une durée courte plutôt que longue.** Un plan de 15 à 25 secondes de scroll, en 3 à 5 scènes maximum, se regarde en entier. Un plan trop long perd le visiteur avant la fin, et coûte plus cher à produire s'il est généré par IA. Ajouter des scènes n'aide jamais un plan qui manque de clarté — resserrer la trajectoire aide toujours.

## Si la voie vidéo générée est choisie

- **Rester sur une seule génération si la durée le permet.** Les outils récents peuvent produire un plan de 10 à 15 secondes en une seule fois — c'est toujours préférable à plusieurs clips recollés, qui laissent presque toujours une coupure visible au raccord.
- **Si plusieurs clips sont nécessaires** (mouvement trop long pour une seule génération) : chaque clip doit démarrer exactement sur la dernière image du clip précédent, jamais sur une image générée à part — sinon la matière, la lumière et les couleurs changent imperceptiblement d'un clip à l'autre et ça se voit au visionnage.
- **Toujours valider le coût avant de lancer une génération en haute qualité.** Ces outils facturent au clip généré — tester d'abord en qualité rapide/économique, ne passer en haute qualité qu'une fois la direction validée.
- **Le film ne remplace jamais le reste du site.** Une fois le plan terminé, le contenu (texte, preuves, tarifs) reste la partie qui convertit réellement le visiteur — le plan cinématique attire l'attention, il ne vend pas seul.
- **Si l'outil choisi est indisponible ou en panne**, ne jamais basculer silencieusement sur un outil de moins bonne qualité pour terminer quand même — un plan cinématique raté ne se voit pas comme "raté", il se voit comme "site amateur". Mieux vaut reporter la génération ou revenir à l'animation en code que de livrer un résultat dégradé sans le signaler.

## Le poids du plan compte autant que son allure

Un plan cinématique mal exporté peut ralentir fortement le chargement de la page d'accueil — exactement l'inverse de l'effet recherché, et un point qui pénalise aussi le référencement (voir Section 03 de ce guide sur le SEO). Avant de livrer :

- Préférer un format vidéo compressé et une résolution adaptée à l'affichage web plutôt que le fichier brut généré par l'outil.
- Charger le plan en dernier, après le texte et les éléments essentiels de la page, pour que le visiteur ne reste jamais face à un écran vide en attendant la vidéo.
- Prévoir une image fixe de secours (le premier photogramme du plan, par exemple) pour les connexions lentes ou les cas où la vidéo ne se charge pas.

## Vérification avant de livrer

- Le mouvement se comprend-il en un seul visionnage, sans besoin d'explication ?
- Le début et la fin du plan correspondent-ils à ce qui avait été décrit au départ ?
- La transition vers le reste de la page se fait-elle sans à-coup ?
- Le site reste-t-il utilisable si les animations sont désactivées (visiteur ayant demandé la réduction des animations dans son navigateur) ?
- Le plan a-t-il été testé sur mobile — un plan pensé pour grand écran doit souvent être raccourci ou simplifié en version mobile plutôt que simplement rétréci.