Create delightful micro-interactions with Framer Motion in Google Antigravity including hover states and feedback animations
# Framer Motion Micro-Interactions for Google Antigravity
Micro-interactions add polish to user interfaces. This guide establishes patterns for creating subtle, delightful animations with Framer Motion in Google Antigravity projects.
## Button Interactions
```typescript
"use client";
import { motion } from "framer-motion";
export function AnimatedButton({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) {
return (
<motion.button
whileHover={{ scale: 1.02, boxShadow: "0 4px 20px rgba(0,0,0,0.12)" }}
whileTap={{ scale: 0.98 }}
transition={{ type: "spring", stiffness: 400, damping: 17 }}
onClick={onClick}
className="px-6 py-3 bg-blue-600 text-white rounded-lg font-medium"
>
{children}
</motion.button>
);
}
```
## Card Hover Effects
```typescript
export function HoverCard({ children }: { children: React.ReactNode }) {
return (
<motion.div
initial={{ y: 0 }}
whileHover={{ y: -4, boxShadow: "0 12px 40px rgba(0,0,0,0.15)" }}
transition={{ type: "spring", stiffness: 300 }}
className="bg-white rounded-xl p-6 shadow-md cursor-pointer"
>
{children}
</motion.div>
);
}
```
## Loading States
```typescript
const spinnerVariants = {
animate: {
rotate: 360,
transition: { duration: 1, repeat: Infinity, ease: "linear" }
}
};
export function LoadingSpinner() {
return (
<motion.div
variants={spinnerVariants}
animate="animate"
className="w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full"
/>
);
}
```
## Success Feedback
```typescript
const checkVariants = {
hidden: { pathLength: 0, opacity: 0 },
visible: { pathLength: 1, opacity: 1, transition: { duration: 0.5, ease: "easeOut" } }
};
export function SuccessCheck() {
return (
<motion.svg viewBox="0 0 24 24" className="w-12 h-12 text-green-500">
<motion.path
d="M5 13l4 4L19 7"
fill="none"
stroke="currentColor"
strokeWidth="2"
variants={checkVariants}
initial="hidden"
animate="visible"
/>
</motion.svg>
);
}
```
## Best Practices
1. **Subtlety**: Keep animations quick (150-300ms)
2. **Purpose**: Every animation should serve a purpose
3. **Performance**: Use transform/opacity only
4. **Accessibility**: Respect reduced motion preferences
5. **Consistency**: Use consistent easing curvesThis Framer Motion prompt is ideal for developers working on:
By using this prompt, you can save hours of manual coding and ensure best practices are followed from the start. It's particularly valuable for teams looking to maintain consistency across their framer motion implementations.
Yes! All prompts on Antigravity AI Directory are free to use for both personal and commercial projects. No attribution required, though it's always appreciated.
This prompt works excellently with Claude, ChatGPT, Cursor, GitHub Copilot, and other modern AI coding assistants. For best results, use models with large context windows.
You can modify the prompt by adding specific requirements, constraints, or preferences. For Framer Motion projects, consider mentioning your framework version, coding style, and any specific libraries you're using.