Transitions et micro-interactions UI

Le concept

Une micro-interaction est un retour visuel subtil à une action : hover, click, load, toggle. Elle rend l'interface vivante. Les transitions (état A → état B) doivent être cohérentes en durée (150-300ms pour les actions, 300-500ms pour les transitions de page) et en courbe (ease-out pour les entrées, ease-in pour les sorties).

Le code

// Micro-interactions: button states
let hovered = false, pressed = false, progress = 0;
function setup() { createCanvas(400, 280); }
function draw() {
  background(11, 15, 20);
  let bx=width/2-70, by=height/2-24, bw=140, bh=48;
  hovered = mouseX>bx&&mouseX<bx+bw&&mouseY>by&&mouseY<by+bh;
  // Animate scale on hover (ease)
  let targetScale = hovered ? 1.06 : 1.0;
  progress = lerp(progress, targetScale, 0.12);
  push();
  translate(width/2, height/2);
  scale(progress);
  // Button
  noStroke();
  fill(hovered ? [55,227,195] : [40,180,155]);
  rect(-70,-24,140,48,10);
  fill(11,15,20);
  textAlign(CENTER,CENTER); textSize(15);
  text(pressed ? 'Envoyé ✓' : 'Envoyer', 0, 0);
  pop();
}
function mousePressed() { if(hovered) pressed = true; }
function mouseReleased() { setTimeout(()=>pressed=false, 1200); }

Pour aller plus loin

Explorez les autres cours gratuits sur la page Ateliers.