91 lines
2.5 KiB
TypeScript
91 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { motion, useReducedMotion } from 'framer-motion';
|
|
import { ReactNode } from 'react';
|
|
|
|
interface MockupStackProps {
|
|
children: ReactNode;
|
|
index?: number;
|
|
}
|
|
|
|
export default function MockupStack({ children, index = 0 }: MockupStackProps) {
|
|
const shouldReduceMotion = useReducedMotion();
|
|
|
|
const seed = index * 1337;
|
|
const rotation1 = ((seed * 17) % 80 - 40) / 20;
|
|
const rotation2 = ((seed * 23) % 80 - 40) / 20;
|
|
|
|
return (
|
|
<div className="relative w-full h-full" style={{ perspective: '1200px' }}>
|
|
<motion.div
|
|
className="absolute rounded-lg bg-iron-gray/80 border border-charcoal-outline"
|
|
style={{
|
|
rotate: rotation1,
|
|
zIndex: 1,
|
|
top: '-8px',
|
|
left: '-8px',
|
|
right: '-8px',
|
|
bottom: '-8px',
|
|
boxShadow: '0 12px 40px rgba(0,0,0,0.3)',
|
|
}}
|
|
initial={{ opacity: 0, scale: 0.92 }}
|
|
animate={{ opacity: 0.5, scale: 1 }}
|
|
transition={{ duration: 0.3, delay: 0.1 }}
|
|
/>
|
|
|
|
<motion.div
|
|
className="absolute rounded-lg bg-iron-gray/90 border border-charcoal-outline"
|
|
style={{
|
|
rotate: rotation2,
|
|
zIndex: 2,
|
|
top: '-4px',
|
|
left: '-4px',
|
|
right: '-4px',
|
|
bottom: '-4px',
|
|
boxShadow: '0 16px 48px rgba(0,0,0,0.35)',
|
|
}}
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 0.7, scale: 1 }}
|
|
transition={{ duration: 0.3, delay: 0.15 }}
|
|
/>
|
|
|
|
<motion.div
|
|
className="relative z-10 w-full h-full rounded-lg overflow-hidden"
|
|
style={{
|
|
boxShadow: '0 20px 60px rgba(0,0,0,0.45)',
|
|
}}
|
|
whileHover={
|
|
shouldReduceMotion
|
|
? {}
|
|
: {
|
|
scale: 1.02,
|
|
rotateY: 3,
|
|
rotateX: -2,
|
|
y: -12,
|
|
transition: {
|
|
type: 'spring',
|
|
stiffness: 200,
|
|
damping: 20,
|
|
},
|
|
}
|
|
}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.4, delay: 0.2 }}
|
|
>
|
|
<motion.div
|
|
className="absolute inset-0 pointer-events-none rounded-lg"
|
|
whileHover={
|
|
shouldReduceMotion
|
|
? {}
|
|
: {
|
|
boxShadow: '0 0 40px rgba(25, 140, 255, 0.4)',
|
|
transition: { duration: 0.2 },
|
|
}
|
|
}
|
|
/>
|
|
{children}
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
} |