Micro Interactions

Micro Interactions

Delightful physics, effects, and interactions. Hover, click, and move your cursor to see them in action.

Magnetic Button

React

Button follows cursor with spring physics

// Use motion/react for spring animation
import { motion } from 'motion/react';
// Track mouse position relative to button center,
// apply x/y offset with spring transition

Ripple Effect

React

Click creates an expanding ripple wave

// On click: record (x, y) relative to button
// Add absolute <span> with scale animation
// Remove after 700ms
Move cursor here ✦

Cursor Glow

Vanilla JS

Radial gradient follows cursor inside element

el.addEventListener('mousemove', (e) => {
  const rect = el.getBoundingClientRect();
  glow.style.left = e.clientX - rect.left + 'px';
  glow.style.top = e.clientY - rect.top + 'px';
});

Blob Morph

CSS

Button border-radius morphs into organic blob

.blob:hover {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  transition: border-radius 0.6s ease;
}
⚡

Tilt Card

Hover to feel the 3D

3D Tilt Card

Vanilla JS

Card tilts in 3D following mouse position

const x = (mouseX / width - 0.5) * 16; // degrees
const y = -(mouseY / height - 0.5) * 16;
el.style.transform =
  `perspective(600px) rotateX(${y}deg) rotateY(${x}deg)`;

Text Scramble

React

Text reveals itself through random character scrambling

// Iterate over characters, for each position:
// show random char until iteration reaches that index
// setInterval at ~40ms, increment by 0.4 per tick