Signal Noir
Le son qui dessine l’image. Une salle de contrôle brutaliste où chaque oscillation est à la fois audible et visible — la rencontre du constructivisme d’El Lissitzky et de la culture oscilloscope.
→ Cliquez ÉMETTRE SIGNAL : le navigateur synthétise un son réel et le spectre, l’oscilloscope et le BPM s’animent en temps réel à partir de cet audio. (Pensez à monter le volume.)
La technique derrière le design
Les visuels ne sont pas une animation pré-enregistrée : ils sont générés par le son lui-même. Au clic, le navigateur crée un graphe Web Audio API complet — un oscillateur sawtooth à 110 Hz enrichi de ses 2ᵉ et 3ᵉ harmoniques, modulé par un LFO sinus à 0,2 Hz (vibrato ±12 Hz), avec enveloppe ADSR sur un GainNode. Un AnalyserNode calcule en direct la FFT sur 256 bins : ces données pilotent image par image les 64 barres de spectre en SVG (vertes en basse amplitude, rouges en haute tension), tandis que getByteTimeDomainData trace un oscilloscope de 200 points. Le tout est dessiné en SVG inline pur — zéro canvas, zéro WebGL, zéro librairie, zéro CDN. Avant le clic, une animation de veille maintient la pièce vivante ; le tout respecte le réglage « mouvement réduit ». Fichier unique autonome, intégration en 5 minutes.
Idéal pour
Palette — signal sur noir
Questions fréquentes
Le son est-il vraiment synthétisé en direct ?
Oui. Aucun fichier audio n’est chargé : le navigateur génère le son lui-même via l’oscillateur Web Audio. Ce que vous entendez et ce que vous voyez proviennent de la même source — l’analyse FFT de ce signal pilote chaque barre du spectre et l’oscilloscope en temps réel.
Faut-il cliquer pour lancer le signal ?
Oui, et c’est voulu : les navigateurs n’autorisent l’audio qu’après une interaction. Avant le clic, la pièce affiche un état de veille (« VEILLE ») avec une animation ambiante ; le bouton « ÉMETTRE SIGNAL » réveille le graphe audio et fait passer le tableau de bord en « ÉMISSION ».
Est-ce intégrable et personnalisable ?
Oui. C’est un fichier unique autonome (un bloc HTML, intégration en 5 minutes), sans librairie ni CDN. La fréquence fondamentale, le timbre, la profondeur du vibrato, le volume et la palette se règlent en quelques constantes en tête de script — une API pause / resume / setFrequency / setGain est exposée.
Est-ce léger et accessible ?
Oui. Pas de canvas ni de GPU : seulement du SVG et l’API audio native, très légers. Le rendu reste fluide sur mobile, et le mode « mouvement réduit » du système est respecté. Le son est volontairement discret (volume maître bas) et entièrement coupable d’un clic.
Ce que vous recevez
Le kit complet : widget autonome (un seul fichier, intégration en 5 minutes), fragment WordPress copier-coller, art génératif injectable, charte design (17 composants UI, couleurs, typographie, tokens) et documentation. Usage commercial illimité.
Voir toute la collection → Tout l’art génératifÀ découvrir aussi : Tonal Bloom · Neon Manifesto · Chromatic Storm · Ideograph · Accueil