Stack Social Studio — démonstration pédagogique non officielle

Outil de composition Instagram créé pour expliquer comment une direction artistique documentée peut devenir un système productif, développé avec l'aide de l'IA.

Aucune affiliation ni validation par Stack Overflow, Stack Exchange ou Koto. Le prototype reste une étude de formation. Les marques Stack Overflow appartiennent à Stack Exchange Inc. et leurs conditions d'utilisation s'appliquent indépendamment des licences de code.

Ce que fait la version actuelle

• Trois formats : Post 1080 × 1350, Story 1080 × 1920, Reel 1080 × 1920.
• Trois compositions : Hero, Side Crop et Full Expressive.
• Quatre formes 2D : Bands, Steps, Frame et Burst.
• Cinq formes 3D projetées : Data, DNA, Spindle, Pyramid et Spark. Géométrie Canvas, pas un moteur WebGL.
• Réglages : fonds et palettes prédéfinis, densité, échelle, position, orientation, couches, dépassement contrôlé sur les bordures, nouveau tirage.
• Mouvement : Click, Follow et Snapback, avec direction, cible (formes, conteneur, titre, tous), vitesse, amplitude, stagger, boucle, play/pause/replay et scrub.
• Exports : PNG de l'état courant ; animation silencieuse de 6 secondes en MP4 si le navigateur le permet, sinon WebM.

Le texte est placé dans un conteneur clair et lisible, avec un CTA contrasté. La mention « non officiel » reste dans l'interface et n'entre plus dans le visuel exporté.

Inspiration et licences

• Stack Overflow — Stack System, notamment How to Use Expressive Containers.
• Stack Overflow — Motion : Click (12 images ou moins à 30 fps), Follow (22), Snapback (20), transitions principalement verticales, pas de fondus. Les mouvements sont des approximations pédagogiques de ces principes ; ce ne sont pas les courbes et exports officiels.
• Stack Overflow — Typography. Les polices Stack Sans Headline / Stack Sans Text sont distribuées sous SIL OFL 1.1, chargées ici par Google Fonts avec police de repli.
• Stack Trace — logiciel Apache-2.0. Les familles de volumes et les palettes à trois couleurs ont inspiré notre code Canvas ; nous n'avons pas intégré tout l'éditeur Svelte/Three.js.
• Trademark Guidance — conditions d'usage de la marque.

Limites et tests avant démonstration

La syntaxe JavaScript, les correspondances des contrôles et l'exécution simulée des modes/familles/compositions ont été vérifiées. Il reste à vérifier visuellement dans le navigateur final les rendus, le chargement des polices et les exports. La conformité à la charte est non certifiée. En cas d'usage réel, vérifier aussi : droits d'utilisation des marques, marges et contrastes, accessibilité, performances et comportement des enregistrements vidéo.

Le mouvement est rendu sur Canvas. L'export dépend de MediaRecorder et de la prise en charge du codec par le navigateur ; un WebM nécessite une conversion H.264/MP4 pour Instagram. Les 3D sont des volumes projetés en 2D et n'offrent pas une manipulation WebGL équivalente à l'outil officiel.