Vitrine d’animation

Trois parties

Chaque partie dure 10 secondes et passe le relais à la suivante par une forme : le noyau de la première partie se réduit au curseur qui amorce le nom, les coins qui encadrent le nom s’ouvrent pour former le cadre du logo, et huit lignes de base deviennent les huit barres du symbole.

Musique : What If So Then de Karneef (bibliothèque audio de YouTube).

Première partie : des formes au rythme de la musique

Un anneau de 128 traits gradués entoure un petit point qui sert de repère dans l’image. Les traits réagissent à 64 bandes de fréquences de la musique, tandis qu’une bande en pointillés à l’intérieur de l’anneau s’élargit avec les fréquences moyennes. Sur trois coups marqués de grosse caisse, la taille de l’anneau varie d’environ 7 % dans un rebond. Au coup le plus fort, l’anneau se sépare en six arcs et un noyau plein apparaît au centre, puis rebondit sur deux coups ultérieurs. Dans les derniers instants, l’anneau se replie dans le noyau, qui se réduit à un point.

Deuxième partie : l’animation du nom

Le point clignote deux fois comme un curseur, puis le nom s’écrit une lettre à la fois, en commençant par Ashton. Des coins jaillissent du point pour encadrer le nom. Pendant que celui-ci reste à l’écran, l’espacement des lettres augmente lentement : aucune pause n’est donc immobile. Les coins s’écartent pour former un cadre sur trois lignes pour Ashton Zhengshen Shu. Le nom complet se rapproche légèrement avant de s’effacer pour ne laisser qu’Ashton. Les coins rebondissent sur quatre coups de grosse caisse, puis s’ouvrent pour former le cadre du logo. Cette approche reprend l’animation du nom qui ouvre ce site Web.

Troisième partie : la page du logo prend vie

La troisième partie part d’une page statique : celle du logo dans le guide de marque de Superlinear Academy. Sur les deux derniers coups de grosse caisse de la séquence du nom, huit fines lignes de base traversent l’image et deviennent les huit barres du symbole, chacune se dévoilant juste après la précédente. Les barres tournent ensuite autour de l’axe vertical du symbole comme un cône, légèrement décalées les unes par rapport aux autres et plus pâles quand elles sont vues de côté. La rotation accélère jusqu’à un coup marqué de grosse caisse, garde son rythme, puis ralentit pour retrouver le logo d’origine après exactement cinq tours. L’idée vient de Balayage et de Rotation en cône, deux animations en boucle du logo sur la page de Superlinear Academy.

Démarche

Ashton a conçu les mouvements et réglé leur rythme, puis les a affinés dans After Effects au fil des versions.