Bouton Delete animé

Voir la démo · Vidéo de référence

Reproduction en HTML, CSS et JavaScript de la micro-interaction de Codea con Horacio, examinée image par image à partir de la vidéo de référence. L’implémentation est réécrite, sans bibliothèque ni ressource externe.

Ouvrir la démo

La démo est hébergée sur GitHub Pages : https://stephane.rathgeber.alsace/delete-button-animation/

Sinon, ouvrir directement index.html dans un navigateur récent. Aucune installation ni compilation nécessaire.

Pour la servir localement :

python3 -m http.server 4173 --bind 127.0.0.1

Puis ouvrir http://localhost:4173.

Interaction

• Cliquer sur Delete : la corbeille s’incline et les six lettres plongent dedans, avec remplissage, vaguelettes et petits impacts.
• Le bouton devient un cercle, un halo tourne autour, puis le bouton retrouve automatiquement son état initial.
• Son activé / Son coupé contrôle les effets générés avec Web Audio, sans fichier audio.
• Ralenti double la durée du prochain cycle.
• Le bouton fonctionne aussi au clavier. La préférence système de réduction des animations remplace la séquence par une confirmation statique.

Cette démo ne supprime aucune donnée. La séquence dure environ cinq secondes et peut être rejouée après chaque cycle ; les clics pendant l’animation sont ignorés.

Fichiers

• index.html : interface et corbeille SVG.
• style.css : apparence du bouton, halo et mise en page responsive.
• app.js : chorégraphie avec Web Animations, remplissage et audio synthétique.