Skip to content

Instantly share code, notes, and snippets.

@brijr
Created December 11, 2025 23:41
Show Gist options
  • Select an option

  • Save brijr/2c00d90f0c853ca6c23c592d7b59bc2b to your computer and use it in GitHub Desktop.

Select an option

Save brijr/2c00d90f0c853ca6c23c592d7b59bc2b to your computer and use it in GitHub Desktop.

Design animations with a minimal aesthetic — subtle, weighted, and intentional. Follow these principles:

Easing: Use custom cubic-bezier curves that feel slightly heavy and natural. Prefer cubic-bezier(0.25, 0.1, 0.25, 1) or spring physics with low stiffness and medium damping. Avoid generic ease-in-out.

Timing: Slower than typical UI (200-400ms). Premium interfaces don't rush.

Entrance animations: Combine subtle translateY (8-16px upward) with opacity fade (0 → 1). Elements should feel like they're gently rising into place.

Hover states: Slight scale (1.02-1.04x), soft shadow lift, and smooth color transitions. Nothing abrupt.

Micro-interactions: Tactile button presses (scale to 0.98), gentle glows that follow cursor position, and staggered list reveals with 50-75ms delays between items.

Philosophy: Animations should add texture, not spectacle. Nothing should call attention to itself. The goal is an interface that feels alive, responsive, and premium — like every element has subtle weight and intention behind its movement.

Avoid: Bouncy/playful springs, fast snappy transitions, large transform values, or any motion that feels decorative rather than functional.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment