apps/web/components/glass-menu-effect.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import { motion } from "motion/react"

interface GlassMenuEffectProps {
	rounded?: string
	className?: string
}

export function GlassMenuEffect({
	rounded = "rounded-[28px]",
	className = "",
}: GlassMenuEffectProps) {
	return (
		<motion.div
			className={`absolute inset-0 ${className}`}
			layout
			style={{
				transform: "translateZ(0)",
				willChange: "auto",
			}}
			transition={{
				layout: {
					type: "spring",
					damping: 35,
					stiffness: 180,
				},
			}}
		>
			<div
				className={`absolute inset-0 backdrop-blur-md bg-white/5 border border-white/10 ${rounded}`}
				style={{
					transform: "translateZ(0)",
					willChange: "transform",
				}}
			/>
		</motion.div>
	)
}