Manifesto film · charte motion
ClassZ, en verre et en lumière.
Toutes les valeurs de cette planche sont relevées dans le code source de classz.ai : logo, couleurs, dégradés, police, graisses, interlettrage, pastilles, bouton, icônes, photos et courbe de mouvement. Le verre et la lumière sont des traitements de rendu appliqués à ces valeurs. Ils n'ajoutent aucune couleur, aucune police, aucune forme.
Les choix recommandés pour le film
Chaque option a été comparée ci-dessous, en démonstration animée. Voici la sélection qui sert le mieux un manifesto corporate sérieux, sans sortir des éléments officiels.
Le fil : une ligne de lumière qui écrit le film
Un seul fil au dégradé officiel traverse les 14 plans. Il trace la route, relie les gens, se brise et se reconstruit, puis entoure le logo. Autour de lui, des rubans de lumière, une typographie en profondeur et un champ de constellations aérées. Le texte vit dans l'espace et le mouvement, les cartes de verre deviennent rares.
→ section 05Givre par défaut, Cristal pour deux moments
Le verre est une matière qui passe dans l'image, pas un fond de diapositive. Le Givre porte les rares lignes secondaires. Le Voile sert aux photos de contexte. Le Cristal est réservé à la plaque du logo et à la carte de Wala Kasmi, les deux moments de signature.
→ section 04Le voile du hero, partout et toujours
Le voile officiel du site reste en fond de chaque plan, avec deux halos qui respirent. Un seul reflet par acte. La pulsation lumineuse est gardée pour un seul mot : ALIVE.
→ section 06Inter 800 en taille optique « display » · retenue
Même police, même version que le site, dans la coupe dessinée par l'auteur d'Inter pour les grandes tailles. Pour tous les titres à partir de 96 px ; le reste garde la coupe texte du site.
→ section 03Balayage givré entre les actes
Une vitre traverse l'écran et révèle l'acte suivant : c'est la signature du film, utilisée six fois. Dans un même acte, on passe par un fondu flou. Le verre liquide n'est utilisé qu'une fois, sur « radically rebuilt », où la déformation a du sens.
→ section 09Photos officielles en deux états
Floutées sous le verre quand elles donnent le contexte (plan 04), nettes dans un cadre de verre quand elles sont le sujet (plan 08 : formateur, salle, apprenants).
→ section 07Piano et pulsation douce, vers 92 BPM
Sobre et ascendant, sans voix. À 92 BPM, 86 s font environ 132 temps : chaque coupe tombe sur un temps, chaque changement d'acte sur une mesure.
→ recherche au prochain pasLe logo, tel qu'il est fourni
Le fichier officiel classz-logo.png (1260 × 400, fond transparent), utilisé entier, à ses proportions. Jamais redessiné, recoloré, ni découpé. Quand la tuile Z doit apparaître seule, on utilise l'icône Z officielle (le favicon du site), jamais un morceau découpé du logo. Autorisé : fondu, échelle, position, un reflet qui passe à l'intérieur de ses formes exactes, et une plaque givrée posée derrière lui. Le PNG limite sa largeur à environ 1100 px dans le film : un SVG officiel serait nécessaire pour aller au-delà.
Logo · classz-logo.png · 1260 × 400
Icône Z · favicon officiel · 512 × 512
Palette officielle
Chaque couleur est accompagnée de sa source dans le code du site.
#E83C70--color-primary · Apply to Join#1B0209titres et texte#370513h1 de l'accueil#1B0209 / 70texte secondaire#3D1671« Find your next live class. »#FDFCFFfond des sections#FCF3FFvoile du herorgba(173,0,255,.11)dégradé haut du hero#FFECF2token du sitebg-primary/10fond des pastilles#EC3B78 → #8B5CF6own path · top 1% · in person#EC3B78 → #A855F7 → #7C3AEDworldwide.Inter, seule police du site
Tout le texte de classz.ai est en Inter, de 400 à 800 (vérifié élément par élément). Google Sans et Roboto viennent des cartes et vidéos intégrées, pas de ClassZ : on ne les utilise pas. Graisses, interlettrage et couleurs sont repris à l'identique, seules les tailles sont agrandies pour la vidéo.
tracking −0,02 em · interligne 1,15
#370513
tracking −0,32 px à 42 px
#1B0209
16-17 px · interligne 25-26 px
ink 70 %
12 px · tracking 0,05 em
texte en dégradé
primary · rayon 8 px
Taille optique : la coupe des grands titres
Inter 4.1, la version officielle complète (même version 4.001 que celle du site), contient un axe de taille optique. Le site sert la coupe « texte » (14). La coupe « display » (32) a été dessinée par l'auteur pour les grands corps : approches plus serrées et détails plus fins. Nos titres font 100 à 200 px à l'écran.
Coupe texte · opsz 14
Exactement le rendu de classz.ai. Option la plus stricte.
Coupe display · opsz 32 · retenue
Même police officielle, pensée pour les grands titres. Pour les titres au-delà de 96 px seulement, le texte courant reste en coupe texte.
Échelle vidéo
Graisses, interlettrage et couleurs identiques au site. Seules les tailles changent pour la lecture à l'écran.
Hero · 800
ALIVE, This is ClassZ. Une ligne, centrée.
Déclaration · 800
Phrases du manifesto. 16:9 : 2 lignes max. 9:16 : 3 lignes max, 72-88 px.
Secondaire · 400-500
Cartes de verre, ink 70 %. 9:16 : 36-40 px.
Pastille · 700 caps
Marqueur d'acte, texte en dégradé officiel.
Le verre comme modernité
Des panneaux givrés (blanc à 42 %, flou de 30 px, liseré blanc en haut, ombre douce dans le primary) portent les phrases secondaires, posés sur les photos officielles du site. La lumière reprend les voiles officiels du hero. Aucune nouvelle teinte.
Trois niveaux de verre
Sur une photo officielle du site (Werqwise), du plus léger au plus présent. Le verre ne porte que du blanc et une ombre dans le primary.
Voile
Pour poser du texte sur une photo de contexte sans la cacher.
blanc 22 % · flou 10 pxGivre · défaut
Cartes des libertés, lignes secondaires, plaques.
blanc 42 % · flou 30 px · liseré blanc · ombre primary 14 %Cristal
Deux moments seulement : plaque du logo, carte de Wala Kasmi.
blanc 72 % · flou 48 px · double liseré · ombre primary 18 %Du motion design, pas des diapositives
Quatre motifs génératifs donnent au film sa dimension artistique. Ils sont faits uniquement du dégradé officiel, du primary et du blanc, et chacun vient d'une idée du manifesto ou du site. Ils portent le texte au lieu de l'encadrer : les cartes deviennent l'exception.
Une seule ligne au dégradé officiel traverse les 14 plans. Elle trace une route, relie l'expert, l'hôte et l'apprenant, se brise sur « rebuilt », puis vient entourer le logo. C'est la colonne vertébrale visuelle du film.
Un ruban de lumière flou, au dégradé officiel, qui ondule lentement derrière la typo. Il donne du souffle aux plans de respiration (ALIVE, room to become) sans ajouter aucun élément graphique.
Les mots du manifesto sont disposés dans l'espace et la caméra avance à travers eux. Le flou dépend de la profondeur, et le verre se forme naturellement entre les couches. Pour les libertés, au lieu de trois cartes.
Des points dispersés se rassemblent en trois amas en volume, qui tournent lentement sur eux-mêmes en vraie perspective : taille, opacité et halo varient avec la profondeur. Chaque point est une perle de verre translucide, avec un liseré fin et un reflet : les points se voient les uns à travers les autres. De fins traits de lumière pastel circulent sur les liens et les ponts, dans les deux sens, comme un transfert de données. Les amas forment un triangle irrégulier à trois profondeurs (un proche, un lointain, un intermédiaire), puis se relient. Aérés, génératifs et déterministes : identiques à chaque rendu.
Quatre états de lumière
Toutes les lumières viennent des teintes officielles du hero (#FCF3FF, violet à 11 %) et du primary. Rien d'autre.
Contexte ou sujet
Les photos du site ne sont ni recadrées dans leur sens, ni retouchées en couleur. Elles prennent deux états selon leur rôle dans le plan.
Contexte · sous le voile
plan 04
Sujet · net, cadre de verre
plan 08La révélation officielle, mot par mot
0,75 s sur cubic-bezier(0.16, 1, 0.3, 1), un mot toutes les 110 ms, comme sur classz.ai. Sortie en 0,4 s sur la courbe d'interface du site.
Trois passages comparés
Les trois tournent en boucle. Le choix recommandé tient compte du sérieux du propos : la transition doit se remarquer comme une signature, pas comme un effet.
Balayage givré
entre les actesUne vitre traverse et révèle la suite. Lisible, élégant, propre à ClassZ.
Fondu flou
dans un acteDiscret, il garde le fil entre deux phrases d'une même idée.
Verre liquide
une seule foisDéforme l'image : réservé à « radically rebuilt », où la déformation devient le sens.
16:9 et 9:16, deux mises en page
Même plan (10, le fil sur « rebuilt »), recomposé pour chaque format, jamais recadré. Les pointillés marquent les zones sûres : 120 px en 16:9, 96 px sur les côtés et 220 px en haut et en bas en 9:16, pour laisser la place aux interfaces des réseaux.
Le mouvement du site, étendu au film
Révélation officielle
Opacité, légère montée, échelle de 0,98 à 1. 0,75 s, cubic-bezier(0.16, 1, 0.3, 1), décalage de 110 ms, comme sur classz.ai.
Sorties
0,4 s, cubic-bezier(0.4, 0, 0.2, 1), la courbe d'interface du site. La scène est vide avant la ligne suivante.
Par mot
Révélation par mot ou groupe de mots, jamais lettre par lettre. Une seule idée à l'écran.
Lumière
Un seul reflet par acte. Les voiles respirent sur 6 à 8 s.
Interdits
Pas de rebond, pas d'élastique, pas de rotation, aucun élément de marque recréé.
Rythme
Coupes calées sur la grille de tempo de la musique.
Ce qu'on reprend de classz.ai
Icônes officielles
Le jeu Lucide du site, fichiers d'origine : book-open, user, globe, calendar, scroll-text, circle-check-big.
Photos officielles
Formateur, salle, apprenants : les trois rôles du plan « a city can become a campus ».
Carte des Growth Partners
Le réseau mondial du site, pour l'idée de « learning network ».
Bandeau des villes
Le ticker d'accueil du site, avec ses vrais chiffres.
Pastille d'étiquette
Au-dessus de chaque section du site. Dans le film : marqueur d'acte.
Bouton officiel
Lien du manifesto. Il clôt le film sous le logo.