Toutes les ressources premium et membres pour 8,99 €/mois, en abonnement sans engagement. Voir les offres

PalateKit

Se connecter
Menu

Demander une ressource

Décrivez en une phrase la ressource qui vous manque. Nous vous écrirons quand elle sera publiée.

0 / 280

Une page, une vidéo ou une image en ligne.

Débloquer PalateKit

Tout débloquer

Offre

Le paiement vaut acceptation de nos conditions générales de vente.

Paiement sécurisé par Stripe. Reçus et factures envoyés par e-mail.

Content de vous revoir

Connectez-vous pour installer, télécharger ou sauvegarder cette ressource. Un compte gratuit suffit pour les ressources gratuites.

Visuels animés réactifs à la musique v1.0.0

Utilisez cette ressource pour relier un son à des animations web ou 3D pour créer un visualiseur audio

Nouveau

  • 309 téléchargements
  • 158 mentions J'aime
  • 129 sauvegardes

Gratuit

Installer avec la CLI

Dans un terminal, depuis le dossier voulu :

npx --yes palatekit@latest install audio-reactive-visuals

Sans option, la skill va dans ~/.agents/skills/ ; ajoutez --agent claude-code (ou codex, cursor…) pour viser un agent.

Première fois : connectez la CLI avec

npx --yes palatekit@latest login

L'agent analyse le son par bandes de fréquences, lisse les valeurs et les applique à l'échelle, au mouvement, à la couleur ou à l'opacité d'éléments. Il gère les réactions aux battements, l'intégration avec React Three Fiber, le post-traitement et GSAP. Vous obtenez un visualiseur ou un fond animé qui suit la musique.

Choisie surtout par

Mise à jour le 2 novembre 2026

Carte de la skill de visualiseurs audio animés

Caractéristiques

Fonctionne dans
Guides d'installation
Génère avec
Le modèle de votre agent
Utilise
  • Node.js
  • Tone.js
Licence
MIT

Ressources similaires

Tout voir

Ce que vous obtenez

  • SKILL.md : correspondances audio vers visuel, réactions aux battements et exemples de code, traduit en français
  • Intégrations prêtes à adapter : React Three Fiber, bloom, aberration chromatique, GSAP
  • Un système complet d'exemple et des conseils de performance

Pour qui

  • Un site ou une page de lancement dont les visuels pulsent avec une musique
  • Un visualiseur pour un podcast, un morceau ou un événement
  • Un fond animé 3D qui réagit au son

Pas pour qui

  • Du montage vidéo classique sans code
  • L'analyse musicale seule, sans rendu visuel
  • Un site sans animation JavaScript

Étiquettes

  • audio
  • animation
  • visualiseur
  • three.js
  • gsap

À propos

Vous dites

« Crée un visualiseur plein écran où un cercle pulse sur les basses et le fond change de couleur sur les aigus. »

Carte de la skill de visualiseurs audio animés

Skill publiée par bbeierle12 sous licence MIT, traduite par PalateKit.

Voir plus

Prérequis

À préparer
Un fichier audio ou une source de son et Une idée du rendu visuel souhaité
Dépendances
Node.js et Tone.js

Comment l'utiliser

  1. Indiquez le morceau audio et le rendu visuel voulu
  2. L'agent installe la bibliothèque audio et branche l'analyse
  3. Réglez le lissage et l'intensité jusqu'à obtenir le rythme souhaité

Aperçu du contenu

Fichiers

  • LICENSE1 Ko
  • NOTICE-PALATEKIT.md0,4 Ko
  • SKILL.md12,6 Ko

Origine et licence

Modifié par PalateKit

Auteur
bbeierle12
Source
github.com/bbeierle12/skill-mcp-claude/tree/1ac5e47e1996f17c4a81ced43fb2a9eec7794a60/skills/audio-reactive
Licence
MIT

Notice

Version modifiée de « audio-reactive » (bbeierle12, MIT) : traduction française et fiche par PalateKit.

Avis des utilisateurs

–

Aucune note pour l'instant

Chargement des avis…

Supprimer votre avis ?

Votre note et votre commentaire seront retirés de la fiche.

Questions fréquentes

Quelles bibliothèques sont utilisées ?

Tone.js pour l'analyse audio, puis selon le cas React Three Fiber, GSAP ou du simple CSS. Vous pouvez demander une version sans Three.js.

Le son se lance-t-il tout seul ?

Les navigateurs exigent un clic avant de lire un son. Prévoyez un bouton de lecture dans votre page.