Make colors slightly softer and friendlier. But bro that's amazing, you give me vibes! Here is for inspiration: <div class="context"> <h1>Glassmorphism</h1> </div> <div class="area" > <ul class="circles"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div > @import url('https://fonts.googleapis.com/css?family=Nuto:400,700'); *{ margin: 0px; padding: 0px; } body{ font-family: poppins; } .context { width: 100%; position: absolute; top:50vh; } .context h1{ text-align: center; color: rgba(255,255,255,0.5); font-border: 1px solid rgba(255, 255, 255, 0.65); font-size: 50px; backdrop-filter: blur(10px); } .area{ background-color: #4158D0; background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); width: 100%; height:100vh; } .circles{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .circles li{ position: absolute; display: block; list-style: none; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 80px; border: 1px solid rgba(255, 255, 255, 0.18); animation: animate 25s linear infinite; bottom: -150px; } .circles li:nth-child(1){ left: 25%; width: 80px; height: 80px; animation-delay: 0s; } .circles li:nth-child(2){ left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; } .circles li:nth-child(3){ left: 70%; width: 20px; height: 20px; animation-delay: 4s; } .circles li:nth-child(4){ left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; } .circles li:nth-child(5){ left: 65%; width: 20px; height: 20px; animation-delay: 0s; } .circles li:nth-child(6){ left: 75%; width: 110px; height: 110px; animation-delay: 3s; } .circles li:nth-child(7){ left: 35%; width: 150px; height: 150px; animation-delay: 7s; } .circles li:nth-child(8){ left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; } .circles li:nth-child(9){ left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; } .circles li:nth-child(10){ left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; } @keyframes animate { 0%{ transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; } 100%{ transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; } } .glass { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* For Safari compatibility */ background-color: rgba(255, 255, 255, 0.3); } .card { border-radius: 20px; background: rgba(39, 39, 39, 0.1); backdrop-filter: blur(60px); -webkit-backdrop-filter: blur(60px); border: 2px solid rgba(255, 255, 255, 0.2); box-shadow: 0 0 80px rgba(0, 0, 0, 0.3); } const Blob = styled.div` position: absolute; width: 500px; height: 500px; background: linear-gradient( 180deg, rgba(47, 184, 255, 0.42) 31.77%, #9eecd9 100% ); mix-blend-mode: color-dodge; border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%; animation: ${move} 25s infinite alternate; `; .glass-card { transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1); } .glass-card:hover { width: 520px; height: 520px; filter: blur(30px); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.6), inset 100px 100px 0 0px #fa709a, inset 200px 200px 0 0px #784ba0, inset 300px 300px 0 0px #2b86c5; } import React from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Mic, X } from "lucide-react"; export const AnimatedMicButton = ({ isRecording, toggleRecording, recordingDuration }) => { // Format seconds to MM:SS const formatTime = (seconds) => { const mins = Math.floor(seconds / 60); const secs = seconds % 60; return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`; }; return ( <div className="relative"> <motion.div className="absolute -inset-4 rounded-full" animate={ isRecording ? { boxShadow: [ "0 0 0 0 rgba(91, 134, 229, 0)", "0 0 0 15px rgba(91, 134, 229, 0.2)", "0 0 0 0 rgba(91, 134, 229, 0)", ], } : {} } transition={{ repeat: Number.POSITIVE_INFINITY, duration: 2, ease: "easeInOut", }} /> <motion.button className="relative w-16 h-16 rounded-full bg-gradient-to-r from-[#36D1DC] to-[#5B86E5] flex items-center justify-center shadow-lg" whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} onClick={toggleRecording} transition={{ type: "spring", stiffness: 400, damping: 17 }} > <AnimatePresence mode="wait"> {isRecording ? ( <motion.div key="recording" initial={{ scale: 0, rotate: -90 }} animate={{ scale: 1, rotate: 0 }} exit={{ scale: 0, rotate: 90 }} transition={{ type: "spring", stiffness: 300, damping: 20 }} > <X className="w-6 h-6 text-white" /> </motion.div> ) : ( <motion.div key="mic" initial={{ scale: 0, rotate: -90 }} animate={{ scale: 1, rotate: 0 }} exit={{ scale: 0, rotate: 90 }} transition={{ type: "spring", stiffness: 300, damping: 20 }} > <Mic className="w-6 h-6 text-white" /> </motion.div> )} </AnimatePresence> {/* Inner glow */} <motion.div className="absolute inset-0 rounded-full" animate={ isRecording ? { boxShadow: [ "inset 0 0 10px rgba(255, 255, 255, 0.5)", "inset 0 0 20px rgba(255, 255, 255, 0.8)", "inset 0 0 10px rgba(255, 255, 255, 0.5)", ], } : {} } transition={{ repeat: Number.POSITIVE_INFINITY, duration: 2, ease: "easeInOut", }} /> </motion.button> {/* Recording time */} <AnimatePresence> {isRecording && ( <motion.div className="absolute -top-10 left-1/2 transform -translate-x-1/2 bg-white px-3 py-1 rounded-full shadow-md text-sm font-medium text-[#5B86E5]" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 10 }} > {formatTime(recordingDuration)} </motion.div> )} </AnimatePresence> </div> ); }; export default AnimatedMicButton; <3d_card> <div class="card"> 3D Card <div class="glow" /> </div> * { box-sizing: border-box; } html, body { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } body { font-family: system-ui, sans-serif; perspective: 1500px; background: linear-gradient(white, #efefef); } .card { font-weight: bold; padding: 1em; text-align: right; color: #181a1a; width: 300px; height: 400px; box-shadow: 0 1px 5px #00000099; border-radius: 10px; background-image: url(https://images.unsplash.com/photo-1557672199-6e8c8b2b8fff?ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80); background-size: cover; position: relative; transition-duration: 300ms; transition-property: transform, box-shadow; transition-timing-function: ease-out; transform: rotate3d(0); } .card:hover { transition-duration: 150ms; box-shadow: 0 5px 20px 5px #00000044; } .card .glow { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-image: radial-gradient(circle at 50% -20%, #ffffff22, #0000000f); } const $card = document.querySelector('.card'); let bounds; function rotateToMouse(e) { const mouseX = e.clientX; const mouseY = e.clientY; const leftX = mouseX - bounds.x; const topY = mouseY - bounds.y; const center = { x: leftX - bounds.width / 2, y: topY - bounds.height / 2 } const distance = Math.sqrt(center.x**2 + center.y**2); $card.style.transform = ` scale3d(1.07, 1.07, 1.07) rotate3d( ${center.y / 100}, ${-center.x / 100}, 0, ${Math.log(distance)* 2}deg ) `; $card.querySelector('.glow').style.backgroundImage = ` radial-gradient( circle at ${center.x * 2 + bounds.width/2}px ${center.y * 2 + bounds.height/2}px, #ffffff55, #0000000f ) `; } $card.addEventListener('mouseenter', () => { bounds = $card.getBoundingClientRect(); document.addEventListener('mousemove', rotateToMouse); }); $card.addEventListener('mouseleave', () => { document.removeEventListener('mousemove', rotateToMouse); $card.style.transform = ''; $card.style.background = ''; }); We will be working on mobile app, so specifically hover effects won't work, but technique to create 3d effects on screen is worth noting!> Please create stunning, award winning desingn that will warm hearts, save lives and make people happy. I believe in you! </3d_card>