Add Price Animation Transitions

[UltiRequiem]

Description

Animate the total price when it changes for better UX.

Location

src/app/pricing/page.tsx - Price display component

Current Implementation

Price updates instantly without animation.

Task

• Use Framer Motion's motion.span for price
• Add number counting animation when price changes
• Highlight price change with color pulse (green for increase, blue for decrease)
• Add smooth easing for professional feel
• Consider using react-countup library for number animation

Example

import { motion, useSpring } from 'framer-motion';

const springConfig = { stiffness: 100, damping: 15 };
const animatedPrice = useSpring(totalPrice, springConfig);

Learning Goals

• Framer Motion animations
• Spring physics animations
• Micro-interactions for UX

Estimated Time

1.5 hours