alaguraj/my-dosa-place-cinematic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: animate menu section gopuram and palace sketches

Browse Source
This commit is contained in:
Alaguraj0361 2026-07-14 16:30:33 +05:30
parent ced44a26ec
commit f2d308e890
1 changed files with 74 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/components/MenuPreview.tsx
View File

@ -165,31 +165,87 @@ export default function MenuPreview() {
{/* Parallax Background Gopuram sketch (Left Watermark) */}
<motion.div
style={{ y: gopuramY, x: gopuramX }}
className="absolute top-12 left-4 w-[160px] h-[200px] md:w-[280px] md:h-[320px] pointer-events-none mix-blend-multiply opacity-[0.12]"
className="absolute top-12 left-4 w-[160px] h-[200px] md:w-[280px] md:h-[320px] pointer-events-auto mix-blend-multiply z-0"
>
<Image
src="/images/menu_gopuram_sketch.png"
alt="Gopuram Sketch"
fill
priority
sizes="(max-width: 768px) 30vw, 20vw"
className="object-contain filter grayscale"
/>
<motion.div
initial={{ opacity: 0, scale: 0.92, rotate: -2, x: -30 }}
whileInView={{
opacity: 0.14,
scale: 1,
rotate: 0,
x: 0,
transition: { duration: 1.6, ease: "easeOut" }
}}
viewport={{ once: true }}
animate={{
y: [0, -6, 3, -6, 0],
x: [0, 3, -3, 2, 0],
rotate: [0, 1.2, -1.2, 0.6, 0]
}}
transition={{
y: { repeat: Infinity, duration: 8, ease: "easeInOut" },
x: { repeat: Infinity, duration: 10, ease: "easeInOut" },
rotate: { repeat: Infinity, duration: 12, ease: "easeInOut" }
}}
whileHover={{
scale: 1.05,
opacity: 0.28,
filter: "sepia(0.4) saturate(1.3) drop-shadow(0 10px 15px rgba(216,195,150,0.15))"
}}
className="w-full h-full relative cursor-pointer"
>
<Image
src="/images/menu_gopuram_sketch.png"
alt="Gopuram Sketch"
fill
priority
sizes="(max-width: 768px) 30vw, 20vw"
className="object-contain filter grayscale transition-all duration-300"
/>
</motion.div>
</motion.div>
{/* Parallax Background Palace sketch (Right Watermark) */}
<motion.div
style={{ y: palaceY, x: palaceX }}
className="absolute top-12 right-4 w-[160px] h-[200px] md:w-[280px] md:h-[320px] pointer-events-none mix-blend-multiply opacity-[0.12]"
className="absolute top-12 right-4 w-[160px] h-[200px] md:w-[280px] md:h-[320px] pointer-events-auto mix-blend-multiply z-0"
>
<Image
src="/images/menu_palace_sketch.png"
alt="Palace Sketch"
fill
priority
sizes="(max-width: 768px) 30vw, 20vw"
className="object-contain filter grayscale"
/>
<motion.div
initial={{ opacity: 0, scale: 0.92, rotate: 2, x: 30 }}
whileInView={{
opacity: 0.14,
scale: 1,
rotate: 0,
x: 0,
transition: { duration: 1.6, ease: "easeOut" }
}}
viewport={{ once: true }}
animate={{
y: [0, 6, -3, 6, 0],
x: [0, -3, 3, -2, 0],
rotate: [0, -1.2, 1.2, -0.6, 0]
}}
transition={{
y: { repeat: Infinity, duration: 9, ease: "easeInOut" },
x: { repeat: Infinity, duration: 11, ease: "easeInOut" },
rotate: { repeat: Infinity, duration: 13, ease: "easeInOut" }
}}
whileHover={{
scale: 1.05,
opacity: 0.28,
filter: "sepia(0.4) saturate(1.3) drop-shadow(0 10px 15px rgba(216,195,150,0.15))"
}}
className="w-full h-full relative cursor-pointer"
>
<Image
src="/images/menu_palace_sketch.png"
alt="Palace Sketch"
fill
priority
sizes="(max-width: 768px) 30vw, 20vw"
className="object-contain filter grayscale transition-all duration-300"
/>
</motion.div>
</motion.div>
<div className="max-w-6xl mx-auto relative z-10">