Motion Library / sur l'établi
01 / Les rayons11 rayons / 21 fiches
Le texte qui entre, l'image qui se découvre, le bouton qui répond : chaque animation a sa fiche, son aperçu qui joue et son prompt.
Fiche 01 — Le texteÀ l'arrivée, sous la main
Chaque lettre sort de son masque par le bas, un peu couchée, un peu petite, et se redresse : départ vif, arrivée très longue. Deux centièmes de seconde les séparent, assez pour voir passer la vague.
Ma toucheSous la main, les lettres viennent à l'aimant comme de la limaille, l'italique passe du contour bronze au plein, et le mot arrivé reçoit sa cote, comme une pièce sur le plan.
Fiche 02 — Le texteÀ la vitesse de la main
Plus la main passe vite, plus les lettres s'allongent dans le sens du geste, avec un flou qui suit la même direction. Quand elle s'arrête, elles reviennent en vibrant, comme une tôle qu'on lâche.
Ma touchePassé une certaine vitesse, le geste fait jaillir des étincelles de meuleuse à l'opposé de son sens, et la vitesse s'affiche au coin, comme sur un compte-tours.
Fiche 03 — Images & conteneursSous la main
La carte suit l'inclinaison de la main en trois dimensions, l'image se rapproche et son flou se dissipe, puis le titre monte, un temps après la carte. Tout passe par la carte graphique.
Ma toucheUne lumière rasante glisse sur la carte comme sur de l'acier brossé, son ombre bouge sur l'établi, et le titre flotte un peu au-dessus de l'image. Les pièces sont les miennes, celles de fait main.
Fiche 04 — Images & conteneursAu clic
Une forme liquide ondule sur elle-même et laisse voir l'image à travers elle. Au clic, elle se resserre jusqu'au rectangle exact qui servira de cadre ; au clic suivant, elle refond.
Ma toucheTant qu'elle coule, son bord est incandescent et l'image chauffe ; en prenant sa forme, elle refroidit jusqu'au bronze, et le cadre reçoit ses cotes. Dedans, une bague que j'ai fondue à cire perdue.
Fiche 05 — Micro-interactionsAvec une souris
Un point suit la main, un anneau le rattrape avec un temps de retard. Près d'un bouton, les deux s'aimantent ; sur une image, l'anneau grandit, inverse les couleurs et propose de voir.
Ma toucheL'anneau est gradué comme une roulette de chantier : il tourne à mesure qu'il roule, compte la distance en millimètres, et prend la forme exacte du bouton qu'il épouse. Depuis le 21 octobre, c'est le curseur de tout le domaine.
Fiche 06 — Micro-interactionsAu clic, retenu
Le thème ne bascule pas d'un coup : il part du bouton en cercle et gagne toute la page. Le soleil rentre ses rayons et devient lune. Le choix reste en mémoire pour la visite suivante.
Ma toucheCe sont les deux fonds du site. Vers le charbon, le bord du cercle rougeoie comme une braise qui gagne puis s'éteint ; vers le papier, il passe en trait de bronze.
Fiche 07 — DéfilementAu défilement
Le dessin se trace à mesure que la page descend et se défait quand elle remonte : les lignes avancent sous le crayon, puis la pièce se découvre derrière un rideau réglé sur la même course.
Ma toucheLe crayon suit l'ordre de l'atelier : les axes, les contours, les cotes, et le cartouche en dernier. Une pointe de bronze court sur le trait en cours, et la pièce qui se découvre est mon applique Jieldé.
Fiche 08 — TransitionsLa main tient la course
Quatre sections passent l'une sur l'autre : la suivante glisse par-dessus comme un calque rigide, puis se découvre en cercle, puis en diagonale. Dans chacune, le fond va moitié moins vite que le premier plan.
Ma toucheChaque section est une tôle poinçonnée d'une étape de fabrication, du débit à la finition. Celle du dessous s'assombrit et s'enfonce un peu sous le poids, et la nouvelle se pose avec un léger tassement.
Fiche 09 — OuverturesÀ l'arrivée
Avant la page, un compteur de 00 à 100. Il ne monte pas droit : il accélère, cale vers 70 comme un vrai chargement, puis file à 100. Les chiffres roulent comme sur un compteur à rouleaux, et l'ouverture lance l'entrée du titre.
Ma toucheÀ 70, le métal résiste : le compteur tremble un instant. À 100, une lame traverse l'écran en diagonale et il se sépare en deux, comme une tôle passée à la cisaille.
Fiche 10 — OuverturesAu clic
Le bouton à trois traits vient à la main et se croise en X. Le menu descend en plein écran, les liens montent un à un depuis leur masque ; au survol, l'aperçu de la page suit la main et les autres liens s'effacent.
Ma toucheLe rideau est celui d'une boutique : lames d'acier, barre de charge en bronze, petit rebond quand il touche le sol. Les trois traits du bouton sont trois fers plats.
Fiche 11 — HérosAu passage de la main
L'ouverture est vide. La main y laisse un sillage d'images, une tous les 90 pixels, qui grandissent en tournant un peu, puis tombent et s'effacent au bout d'une seconde et demie. Le titre reste devant, net.
Ma toucheLes images sont mes pièces, chacune avec son étiquette de stock et sa référence. Le titre porte une ombre de forge qui tourne à l'opposé de la main.
Fiche 12 — HérosSous la main, au clic
Le mot géant est une fenêtre : la photo n'apparaît qu'à travers ses lettres. Sous la main, une lentille découvre la photo autour d'elle ; au clic, on plonge dans une lettre jusqu'à ce qu'elle devienne tout l'écran.
Ma toucheLa lentille est une loupe de bijoutier : elle grossit deux fois, porte son réticule gradué et son « ×2 ». Le mot porte un liseré de bronze, comme une gravure. Derrière les lettres, ma bague méduse, sculptée dans ZBrush.
Fiche 13 — MatièreAu glisser, au clic
Des images posées sans grille, qu'on fait glisser à la main. Plus le geste est vif, plus elles ondulent ; au clic, l'image s'agrandit depuis sa place jusqu'à toute la scène, sans coupure, et y revient au clic suivant.
Ma toucheL'ondulation est celle de l'air au-dessus d'une pièce qui sort de la forge : un mirage de chaleur qui tire les images vers le chaud. Ouverte, la pièce reçoit son cartouche.
Fiche 14 — MatièreSous la main, au clic
Un fond qui bouge sans fin, calculé pixel par pixel par la carte graphique : un bruit lent fait onduler la matière. La main y crée une perturbation locale, et un mouvement vif sépare un instant le rouge, le vert et le bleu.
Ma toucheLe bruit est plié en couches, comme l'acier damassé qu'on forge en repliant la barre. Chaque clic est un coup de marteau : une onde part du point frappé et rougit le métal en passant.
Fiche 15 — ProfondeurAu défilement de la scène
La pièce reste au centre pendant que trois textes défilent à côté. La caméra la suit : gros plan, vue d'ensemble, détail macro. Le mouvement est amorti, même à la molette la plus sèche.
Ma toucheUne pomme de rampe tournée, modelée ici par révolution d'un profil, comme au tour. Les trois arrêts sont les vues d'un plan : l'axe de révolution en trait mixte, et le détail A cerclé à l'échelle 4:1.
Fiche 16 — ProfondeurSans fin, la main accélère
Un tunnel de texte qui avance sans fin vers nous, calculé d'un seul shader. Un mouvement vif de la main lui donne un coup d'accélération, et l'axe du regard penche un peu dans le sens du geste.
Ma toucheLe tunnel est un tube d'acier dont on regarde l'intérieur : le texte y est gravé en bronze, les viroles soudées passent une à une, et le fond rougeoie comme le bout qui sort de la forge.
Fiche 17 — PagesAu clic
Changer de page sans écran blanc : le texte de l'ancienne s'efface vers le haut, un panneau passe devant, la nouvelle se charge derrière, puis le panneau se retire et ses éléments entrent l'un après l'autre. Rien ne reste branché d'une page à l'autre.
Ma toucheLe panneau est une tôle qu'on plie à la presse : elle descend autour de sa ligne de pli, l'angle s'affiche de 0 à 90°, et elle repart de l'autre côté une fois la page changée.
Fiche 18 — PagesAu défilement, dans les deux sens
Le titre et les images arrivent éclatés aux quatre coins, de travers, les images en formes molles. En descendant, tout rejoint sa place et les formes deviennent des cadres droits ; en remontant, la page se démonte.
Ma toucheChaque élément porte son repère de montage, A1, B2, comme les pièces d'un ouvrage avant soudure. Arrivé en place, il est pointé : un point de soudure s'allume à son angle.
Fiche 19 — Le domaineAvec une souris
Le curseur du site jusqu'au 21 octobre 2026. Un ruban suit le pointeur et s'effile derrière lui : plein à la pointe, il s'amincit jusqu'à rien sur vingt-six points. Il prend la couleur du fond et vire à l'orange dès qu'on approche de ce qui se clique.
Ma toucheUn coup de pinceau plutôt qu'une flèche : encre sur le papier, craie sur le charbon, et il rougit à l'approche d'un lien comme une pièce qu'on rapproche de la forge. La roulette du métreur, fiche 05, a pris sa place sur le domaine.
Fiche 20 — Le domaineAu survol, au clic, avec le son
Le son valide le geste sans se faire remarquer : au survol d'un bouton, une note brève et aiguë, à peine audible ; au clic, un coup plus grave et mat. Chaque son varie de quelques pour cent pour ne jamais se répéter. Il ne s'éveille qu'au premier clic, et un bouton le coupe pour de bon.
Ma toucheTout est synthétisé, sans un fichier : au survol, une tige d'acier qu'on effleure, deux harmoniques éteintes en moins d'un dixième de seconde ; au clic, un coup mat qui tombe d'un tiers. L'onde s'inscrit sur l'oscilloscope et sa fréquence s'affiche au coin.
Fiche 21 — Le domaineSous la main, comme au défilement
La page du dessus se lève comme une feuille qu'on retire de l'établi et découvre le pied, qui attendait dessous, immobile. Son titre suit le défilement à la trace : couché en arrière, écarté et en fantôme, il se redresse lettre après lettre, se resserre et se remplit.
Ma toucheL'italique passe du contour bronze au plein, une ombre tombe de la feuille sur le pied, et sous la main les lettres proches se soulèvent et prennent le bronze. C'est le pied de toutes les pages du site, celui de cette page compris : un seul script, /js/pied.js.
Fiche 22 — Sur l'établiEn préparation
La bibliothèque se remplit au fil de l'atelier : une animation arrive quand on m'en apporte une ou quand j'en choisis une. Elle prendra cette place, avec son aperçu qui joue et son prompt.
