liquid-development/website
3
0
Fork 0
Code Issues Pull Requests Activity

Adjusted bubbles

Browse Source
This commit is contained in:
Felix Kirchner
2025-12-18 22:33:57 +01:00
parent 6f2dbfd966
commit c5e385318b
1 changed files with 27 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/Bubbles.jsx
View File

@@ -1,26 +1,40 @@
import React from 'react';
import {motion} from 'framer-motion';
export const Bubbles = () => (
<div className="absolute inset-0 overflow-hidden pointer-events-none z-0">
{Array.from({length: 15}).map((_, i) => (
<motion.div key={i}
className="absolute rounded-full bg-[#00A3FF]/20 backdrop-blur-sm border border-[#00A3FF]/30"
export const Bubbles = () => {
const sizes = [20, 40, 60, 80];
return (
<div className="absolute inset-0 overflow-hidden pointer-events-none z-0">
{Array.from({length: 15}).map((_, i) => {
const size = sizes[i % sizes.length];
return (
<motion.div
key={i}
className="absolute rounded-full"
initial={{
y: "120vh",
x: Math.random() * 100 + "vw",
scale: Math.random() * 0.5 + 0.5,
opacity: 0
}}
animate={{y: "-20vh", opacity: [0, 1, 0]}}
animate={{y: "-20vh", opacity: [0, 0.7, 0]}}
transition={{
duration: Math.random() * 10 + 10,
duration: Math.random() * 10 + 15,
repeat: Infinity,
ease: "linear",
delay: Math.random() * 10
}}
style={{width: Math.random() * 50 + 20 + "px", height: Math.random() * 50 + 20 + "px"}}
/>
))}
</div>
);
style={{
width: `${size}px`,
height: `${size}px`,
aspectRatio: '1/1',
boxSizing: 'border-box',
border: `${size / 5}px solid rgba(0, 163, 255, 0.6)`
}}
/>
);
})}
</div>
);
};