import React, { useState } from 'react'
import { motion, AnimatePresence, useMotionValue, useTransform } from 'framer-motion'
// Animated Card
function AnimatedCard({ children, delay = 0 }) {
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay, duration: 0.5, ease: [0.23, 1, 0.32, 1] }}
>
{children}
</motion.div>
)
}
// Draggable Box
function DraggableBox() {
const x = useMotionValue(0)
const background = useTransform(
x,
[-100, 0, 100],
[' #ec4899', ' #8b5cf6', ' #06b6d4']
)
return (
<motion.div
className="p-6 rounded-xl bg-zinc-800/50 border border-zinc-700/50 mb-6"
>
<p className="text-sm text-zinc-400 mb-4">Drag me horizontally!</p>
<motion.div
drag="x"
dragConstraints={{ left: -100, right: 100 }}
style={{ x, backgroundColor: background }}
whileDrag={{ scale: 1.1 }}
className="w-16 h-16 rounded-xl cursor-grab active:cursor-grabbing mx-auto"
/>
</motion.div>
)
}
// Staggered List
function StaggeredList({ items }) {
const containerVariants = {
hidden: { opacity: 0 },