77 lines
1.5 KiB
TypeScript
77 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { motion } from "framer-motion";
|
|
import { Box, Stack } from "@mui/material";
|
|
|
|
export const TypingIndicator = () => {
|
|
return (
|
|
<Stack direction="row" spacing={0.5} alignItems="center" sx={{ p: 1 }}>
|
|
{[0, 1, 2].map((i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ y: 0 }}
|
|
animate={{ y: [-4, 4, -4] }}
|
|
transition={{
|
|
duration: 0.6,
|
|
repeat: Infinity,
|
|
delay: i * 0.15,
|
|
ease: "easeInOut",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: "50%",
|
|
background: "linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%)",
|
|
}}
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
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",
|
|
}}
|
|
/>
|
|
);
|