Cüte Logo

Motion

Motion design enhances user experience and brings our brand to life. Our animations are purposeful, smooth, and delightful.

Animation principles

Purposeful

Every animation should serve a purpose—providing feedback, guiding attention, or enhancing understanding. Avoid motion for motion's sake.

Smooth & natural

Animations should feel natural and fluid. Use easing functions that mimic real-world physics for a more organic feel.

Accessible

Respect user preferences for reduced motion. Always provide alternatives and ensure animations don't cause discomfort.

Common animations

Fade In

Use for content appearing on screen. Duration: 200-300ms.

Slide In

Use for modals and overlays. Duration: 250-350ms.

Timing & easing

Micro-interactions

100-200ms - Button hovers, icon changes

UI transitions

200-300ms - Page transitions, modal appearances

Content animations

300-500ms - List items, card reveals

Use consistent timing across similar interactions. Faster animations feel snappier, while slower animations feel more deliberate.

Usage guidelines

Do

  • Use animations to provide feedback
  • Keep animations subtle and purposeful
  • Respect prefers-reduced-motion
  • Test animations on various devices

Don't

  • Animate everything just because you can
  • Use jarring or distracting animations
  • Create animations that cause motion sickness
  • Ignore accessibility preferences