Le personnage du site.
Trois pistes, une retenue.
Le lab montre comment nous explorons avant de construire. Première exploration : le personnage de ce site, de trois esquisses animées à celui qui accompagne aujourd’hui la lecture de l’accueil.
Le manifeste explique ; l’accueil devait le montrer.
Une petite machine, dessinée à partir des lettres G et M du monogramme, que des mains assemblent puis qui construit à son tour. L’humain reste abstrait : ce sont des mains.
Avant d’en mettre une sur l’accueil, nous en avons animé trois, de bout en bout, pour les comparer geste par geste.
Les trois pistes, au même rythme.
Les quatre moments arrivent en même temps dans les trois scènes : les mains, l’éveil, l’action, la fin. De quoi comparer les gestes, moment par moment.
MÊME RYTHMEChaque piste accélère ou ralentit pour atteindre ses poses clés en même temps que les autres.
A. Le G s’éveille
Le G est la machine. Le M est ce qu’elle construit.
- Deux mains posent un G sur la ligne de la page. Il est encore inerte.
- Un œil s’allume dans son vide. Il se redresse et regarde la page.
- Il avance par petits bonds. Sa barre s’allonge comme un bras, attrape un bloc et le pose : un élément de la page se construit.
- En bas de page, il pose les derniers blocs : ils forment un M à côté de lui. GM est complet.
Le plus simple et le plus attachant. Risque : une boule avec un œil peut devenir une mascotte.
ANIMATION21,0 s en boucle, 122 étapes élémentaires. Sans animation, la scène montre l’image 02, « Un œil s’allume ».
IMAGE 02Étape 11 sur 44 : Il regarde la page
Le scénario, étape par étape
Raccourcis dans le lecteur : K ou Espace lecture et pause, J et L une seconde, , et . image par image, 1 à 4 poses clés.
B. Le G sur le M
Le M est le corps et les jambes. Le G est la tête.
- Deux mains posent un G sur un M dressé. Deux lettres immobiles.
- L’œil s’allume dans le G : la tête s’éveille. Le M se redresse sur ses montants.
- Il marche d’une section à l’autre en se balançant d’un pied sur l’autre. La barre du G sert de bras pour porter un bloc.
- Il s’arrête en bas de page, devant ce qu’il a construit, et regarde le visiteur.
Le plus personnage. Risque : la marche demande le plus de soin pour ne paraître ni mécanique ni comique.
ANIMATION15,8 s en boucle, 70 étapes élémentaires. Sans animation, la scène montre l’image 02, « La tête s’éveille ».
IMAGE 02Étape 12 sur 35 : Il regarde la page
Le scénario, étape par étape
Raccourcis dans le lecteur : K ou Espace lecture et pause, J et L une seconde, , et . image par image, 1 à 4 poses clés.
C. Les pièces
Le monogramme en kit : le G, deux montants et un V (le M découpé). Les mains montent la machine pièce par pièce.
- Sur la page, des pièces posées sur la ligne : un G, deux montants et un V.
- Les mains les assemblent : les montants d’abord, puis le V entre eux, puis le G sur le dessus.
- La dernière pièce posée, un œil s’allume. La machine bâtit à son tour, comme dans la piste B.
- À la fin, elle se démonte et ses pièces se rangent en GM : la machine redevient le logo.
Le meilleur récit d’introduction : l’humain construit la machine. Risque : c’est B avec une ouverture plus longue, donc le plus long à animer.
ANIMATION20,6 s en boucle, 79 étapes élémentaires. Sans animation, la scène montre l’image 03, « Elle s’allume ».
IMAGE 03Étape 17 sur 31 : Elle s’allume
Le scénario, étape par étape
Raccourcis dans le lecteur : K ou Espace lecture et pause, J et L une seconde, , et . image par image, 1 à 4 poses clés.
La piste B, le G posé sur le M.
La plus vivante, celle qui demande le plus de soin dans la marche. Elle accompagne désormais la lecture de l’accueil : dans chaque section, il arrive en marchant sur le filet qui la ferme et fait son geste, une seule fois, à son rythme.
- 01Ouverture : il s’éveille
- 02Ce que nous faisons : trois blocs
- 03Réalisations : quatre cartes
- 04Technologie : branché sur le filet
- 05Manifeste : il lève les yeux
- 06Contact : il se range en GM
Un rig, des poses clés, des listes d’étapes.
Un seul rig dessine toutes les images. Chaque animation est une liste d’étapes qui passe exactement par ses poses clés ; un test le vérifie à chaque modification.
Le mouvement reste décoratif : le texte se lit sans lui, et sans JavaScript. Il s’arrête si votre système demande de réduire les animations, et le moteur ne se charge qu’au moment où une scène en a besoin.
3 pistes · 12 poses clés · 271 étapes · 6 scènes sur l’accueil
Qu’allons-nous construire ?
Un logiciel, un site, une application ou une formation : décrivez-nous ce que vous souhaitez faire.
Écrivez-nous directement par e-mail.