UI Transitions & Micro-interactions

The concept

A micro-interaction is a subtle visual response to an action: hover, click, load, toggle. It makes the interface feel alive. Transitions (state A → B) should be consistent in duration (150-300ms for actions, 300-500ms for page transitions) and curve (ease-out for entrances, ease-in for exits).

The 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); }

Going further

Explore other free courses on the Workshops page.