47 lines
787 B
TypeScript
47 lines
787 B
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { motion } from "framer-motion";
|
|
|
|
export const Blob = ({
|
|
color,
|
|
size,
|
|
top,
|
|
left,
|
|
delay,
|
|
}: {
|
|
color: string;
|
|
size: number;
|
|
top: string;
|
|
left: string;
|
|
delay: number;
|
|
}) => (
|
|
<motion.div
|
|
initial={{ scale: 0.8, opacity: 0.3, x: 0, y: 0 }}
|
|
animate={{
|
|
scale: [0.8, 1.2, 0.8],
|
|
opacity: [0.3, 0.5, 0.3],
|
|
x: [0, 30, 0],
|
|
y: [0, -30, 0],
|
|
}}
|
|
transition={{
|
|
duration: 8,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
delay,
|
|
}}
|
|
style={{
|
|
position: "absolute",
|
|
top,
|
|
left,
|
|
width: size,
|
|
height: size,
|
|
borderRadius: "50%",
|
|
background: color,
|
|
filter: "blur(60px)",
|
|
zIndex: 0,
|
|
pointerEvents: "none",
|
|
}}
|
|
/>
|
|
);
|