svelte glowy bubles

bubble.svelte

<script lang="ts">
	import type { AnimationLength, Percentage, Size } from '$lib/circles';

	export let top: Percentage = undefined;
	export let bottom: Percentage = undefined;
	export let right: Percentage = undefined;
	export let left: Percentage = undefined;
	export let animatonLength: AnimationLength = 10;

	export let size: Size;

	const topStyle = top ? `top: ${top};` : '';
	const bottomStyle = bottom ? `bottom: ${bottom};` : '';
	const rightStyle = right ? `right: ${right};` : '';
	const leftStyle = left ? `left: ${left};` : '';

	let style = `${topStyle}${bottomStyle}${rightStyle}${leftStyle}`;
</script>

<div
	{style}
	class="circle"
	aria-hidden="true"
	class:xs={size === 'xs'}
	class:sm={size === 'sm'}
	class:md={size === 'md'}
	class:lg={size === 'lg'}
	class:xl={size === 'xl'}
	class:animation-10={animatonLength === 10}
	class:animation-15={animatonLength === 15}
	class:animation-20={animatonLength === 20}
	class:animation-25={animatonLength === 25}
/>

<style lang="postcss">
	.circle {
		border-radius: 150px;
		height: 300px;
		width: 300px;
		backdrop-filter: blur(16px) saturate(180%);
		-webkit-backdrop-filter: blur(16px) saturate(180%);
		background-color: rgba(0, 0, 0, 0.2);
		border: 2px solid rgba(255, 255, 255, 0.2);
		position: absolute;
		z-index: -10;
		animation-delay: 2s;
		box-shadow: inset 0px 17.4155px 25.0068px -16.0758px rgba(219, 0, 255, 0.5),
			inset 0px 3.12585px 4.91205px -1.7862px #ffffff,
			inset 0px -36.6171px 30.3654px -28.5792px rgba(145, 68, 141, 0.3),
			inset 0px 43.7619px 44.655px -21.4344px rgba(255, 222, 254, 0.3),
			inset 0px 1.7862px 8.0379px rgba(255, 222, 254, 0.3),
			inset 0px 0.44655px 17.862px rgba(255, 222, 254, 0.2);
	}

	.xs {
		height: 50px;
		width: 50px;
		border-radius: 25px;
	}

	.sm {
		height: 100px;
		width: 100px;
		border-radius: 50px;
	}

	.md {
		height: 150px;
		width: 150px;
		border-radius: 75px;
		@apply hidden lg:block;
	}

	.lg {
		height: 200px;
		width: 200px;
		border-radius: 100px;
		@apply hidden lg:block;
	}

	.xl {
		height: 350px;
		width: 350px;
		border-radius: 175px;
		@apply hidden lg:block;
	}

	.animation-10 {
		animation: animate 10s ease-in-out;
	}

	.animation-15 {
		animation: animate 15s ease-in-out;
	}

	.animation-20 {
		animation: animate 20s ease-in-out;
	}

	.animation-25 {
		animation: animate 25s ease-in-out;
	}

	@keyframes animate {
		0% {
			transform: scale(0) translateY(0) rotate(70deg);
			opacity: 0;
		}
		30% {
			transform: scale(1.1) translateY(-50px) rotate(360deg);
			opacity: 1;
		}
		60% {
			transform: scale(0.9) translateY(-1px) rotate(360deg);
			opacity: 1;
		}
		100% {
			opacity: 1;
		}
	}
</style>