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