Các công cụ Vibe Code

Framer Motion: Animation Chuyên Nghiệp Không Cần Code

Framer Motion là library animation mạnh nhất cho React. Với AI, bạn có thể tạo animations phức tạp chỉ bằng mô tả.

Animation Principles Cho UI

Prompt Foundation:

Animation principles cho UI:
- Duration: 150-300ms cho micro-interactions
- Easing: ease-out cho enter, ease-in cho exit
- Purpose: mỗi animation phải có lý do
- Subtlety: animation hỗ trợ, không distract

Không làm:
- Duration > 500ms cho UI elements
- Linear easing (looks robotic)
- Excessive bouncing

Fade & Slide Patterns

Basic Entrance:

Implement fade-in animation với Framer Motion:

const fadeIn = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.3, ease: "easeOut" }
};

Apply cho: cards, modals, dropdown menus

Stagger Children:

List items animate staggered:

const container = {
  animate: {
    transition: { staggerChildren: 0.1 }
  }
};

const item = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 }
};

Apply cho: grid items, menu options, form fields

Hover & Tap Animations

Button Interactions:

Button có hover và tap feedback:

<motion.button
  whileHover={{ scale: 1.02 }}
  whileTap={{ scale: 0.98 }}
  transition={{ duration: 0.15 }}
>

Card hover:
whileHover={{ y: -4, boxShadow: "0 10px 40px -10px rgba(0,0,0,0.1)" }}

Page Transitions

Route Animation:

Page transition animation:

Exit: fade out, slide up slightly
Enter: fade in từ bottom

const pageVariants = {
  initial: { opacity: 0, y: 20 },
  in: { opacity: 1, y: 0 },
  out: { opacity: 0, y: -20 }
};

transition: { duration: 0.3, ease: "easeInOut" }

Prompt Templates Cho AI

Complex Animation:

Tạo notification toast animation:

1. Enter từ right, slide in 300ms
2. Pause 3 giây
3. Exit sang right, fade out 200ms
4. Có progress bar animate từ 100% xuống 0%

Use Framer Motion với AnimatePresence.

Common Animations Library

Performance Tips

Animation performance checklist:
- Chỉ animate transform và opacity
- Avoid animating: width, height, top, left
- Use will-change: transform cho complex animations
- Reduce motion cho users với preference

🎯 Key Insight: Animation tốt nhất là animation bạn không notice - nó chỉ làm UI feel smoother.