Function ResourcePattern

apps/baseai.dev/src/components/Resources.tsx:104–144

({
	mouseX,
	mouseY,
	...gridProps
}: Resource['pattern'] & {
	mouseX: MotionValue<number>;
	mouseY: MotionValue<number>;
})

}

function ResourcePattern({
	mouseX,
	mouseY,
	...gridProps
}: Resource['pattern'] & {
	mouseX: MotionValue<number>;
	mouseY: MotionValue<number>;
}) {
	let maskImage = useMotionTemplate`radial-gradient(180px at ${mouseX}px ${mouseY}px, white, transparent)`;
	let style = { maskImage, WebkitMaskImage: maskImage };

	return (
		<div className="pointer-events-none">
			<div className="absolute inset-0 rounded-2xl transition duration-300 [mask-image:linear-gradient(white,transparent)] group-hover:opacity-50">
				<GridPattern
					width={72}
					height={56}
					x="50%"
					className="absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/[0.02] stroke-black/5 dark:fill-white/1 dark:stroke-white/2.5"
					{...gridProps}
				/>
			</div>
			<motion.div
				className="absolute inset-0 rounded-2xl bg-gradient-to-r from-[#fad000]/25 to-[#19182E]/10 opacity-0 transition duration-300 group-hover:opacity-100 dark:from-[#fad000]/30 dark:to-[#19182E]/80"
				style={style}
			/>
			<motion.div
				className="absolute inset-0 rounded-2xl opacity-0 mix-blend-overlay transition duration-300 group-hover:opacity-100"
				style={style}
			>
				<GridPattern
					width={72}
					height={56}
					x="50%"
					className="absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/50 stroke-black/70 dark:fill-white/2.5 dark:stroke-white/10"
					{...gridProps}
				/>
			</motion.div>
		</div>
	);
}

function Resource({ resource }: { resource: Resource }) {
	let mouseX = useMotionValue(0);