rasterize bloom :D

apps/landing/src/components/AppEmbed.tsx

@@ -58,15 +58,13 @@ const AppEmbed = () => {
 
 	return (
 		<div className="w-screen">
-			{/* {renderBloom && (
-				<div className="relative max-w-full sm:w-full sm:max-w-[1200px] mx-auto">
-					<div className="absolute w-full overflow-visible top-[100px] h-32">
-						<div className="left-0 mt-22 bloom bloom-one" />
-						<div className="left-[34%] -mt-32 bloom bloom-three " />
-						<div className="right-0 invisible sm:visible bloom bloom-two" />
-					</div>
+			{renderBloom && (
+				<div className="relative max-w-full sm:w-full sm:max-w-[1400px] mx-auto">
+					<div className="bloom burst bloom-one" />
+					<div className="bloom burst bloom-three" />
+					<div className="bloom burst bloom-two" />
 				</div>
-			)} */}
+			)}
 			<div className="relative z-30 h-[328px] px-5 sm:h-[428px] md:h-[428px] lg:h-[628px] mt-8 sm:mt-16">
 				<div
 					className={clsx(

apps/landing/src/components/Bubbles.tsx

@@ -18,18 +18,18 @@ export const Bubbles = () => {
 				interactivity: {
 					events: {
 						onClick: {
-							enable: true,
+							enable: false,
 							mode: 'push'
 						},
-						resize: true
+						resize: false
 					}
 				},
 				particles: {
 					color: {
 						value: '#ffffff'
 					},
 					collisions: {
-						enable: true
+						enable: false
 					},
 					move: {
 						direction: 'top',

apps/landing/src/components/Markdown.tsx

@@ -13,7 +13,7 @@ function MarkdownPage(props: MarkdownPageProps) {
 		Prism.highlightAll();
 	}, []);
 	return (
-		<div className="sm:container max-w-4xl p-4 mt-32 mb-20">
+		<div className="max-w-4xl p-4 mt-32 mb-20 sm:container">
 			<article id="content" className="m-auto prose lg:prose-xs dark:prose-invert">
 				{props.children}
 			</article>

apps/landing/src/pages/careers.page.tsx

@@ -109,12 +109,8 @@ function Page() {
 			</Helmet>
 			<div className="container relative max-w-4xl min-h-screen p-4 m-auto mt-32 mb-20 prose text-white prose-invert">
 				<div
-					className="page-bloom absolute pointer-events-none z-0 -top-60 -right-[400px] w-[1000px] h-[800px]  fade-in will-change-transform"
-					style={{
-						background: 'linear-gradient(180deg, #040CA8 0%, #9704A8 95.73%)',
-						filter: 'blur(300px)',
-						transform: 'rotate(56.81deg)'
-					}}
+					className="bloom subtle egg-bloom-two -top-60 -right-[400px]"
+					style={{ transform: 'scale(2)' }}
 				/>
 				<h1 className="px-2 mb-3 text-4xl font-black leading-tight text-center text-white fade-in-heading md:text-5xl">
 					Build the future of files.
@@ -162,9 +158,7 @@ function Page() {
 						))}
 					</div>
 					<hr className="w-full my-24 border-gray-200 opacity-10 border-1" ref={openPositionsRef} />
-					<h1
-						className="px-2 mb-0 text-4xl font-black leading-tight text-center text-white"
-					>
+					<h1 className="px-2 mb-0 text-4xl font-black leading-tight text-center text-white">
 						Open Positions
 					</h1>
 					<p className="mt-2 mb-4">Any of these suit you? Apply now!</p>

apps/landing/src/pages/team.page.tsx

@@ -193,13 +193,9 @@ function Page() {
 			</Helmet>
 			<div className="relative team-page">
 				<div
-					className="page-bloom absolute -top-60 -right-[400px] opacity-60 w-[1000px] h-[800px] fade-in will-change-transform"
-					style={{
-						background: 'linear-gradient(180deg, #040CA8 0%, #0474A8 95.73%)',
-						filter: 'blur(300px)',
-						transform: 'rotate(56.81deg)'
-					}}
-				></div>
+					className="bloom subtle egg-bloom-one -top-60 -right-[400px]"
+					style={{ transform: 'scale(2)' }}
+				/>
 				<div className="relative z-10">
 					<h1 className="text-5xl leading-snug fade-in-heading ">
 						We believe file management should be <span className="title-gradient">universal</span>.

apps/landing/src/style.scss

@@ -97,34 +97,49 @@ html {
 }
 
 .bloom {
-	@apply absolute w-96 h-96;
+	@apply absolute w-[1200px] h-[1200px] -mt-[320px];
 	will-change: opacity;
 	opacity: 0;
 	will-change: filter opacity;
-	border-radius: 50%;
-	transform: scale(1.5);
-	-webkit-filter: blur(120px);
-	filter: blur(120px);
-	animation-name: bloomBurst;
-	animation-duration: 1s;
 	animation-timing-function: ease-in-out;
 	animation-fill-mode: forwards;
 	animation-iteration-count: 1;
 	animation-direction: forwards;
+	&.burst {
+		animation-name: bloomBurst;
+		animation-duration: 1s;
+	}
+	&.subtle {
+		animation-name: bloomSubtle;
+		animation-duration: 3s;
+	}
 	&.bloom-one {
-		background: conic-gradient(from 90deg at 50% 50%, #255bef, #aa1cca);
+		@apply left-0 -ml-[300px];
+		background: url('/bloom-one.png') no-repeat center center;
+		background-size: contain;    
 		animation-delay: 300ms;
 	}
 	&.bloom-two {
-		background: conic-gradient(from 90deg at 50% 50%, #c62dbb, #1d054b);
+		@apply right-0 -mr-[300px];
+		background: url('/bloom-two.png') no-repeat center center;
+		background-size: contain;
 		animation-delay: 0ms;
-		margin-top: -20px;
 	}
 	&.bloom-three {
-		background: conic-gradient(from 90deg at 50% 50%, #6c2ca0, #0b0b98);
-		animation-delay: 600ms;
-		margin-top: 0px;
+		@apply left-auto right-auto invisible md:visible -mt-[250px] ml-24;
+		background: url('/bloom-three.png') no-repeat center center;
+		background-size: contain;
+		animation-delay: 800ms;
+	}
+	&.egg-bloom-one {
+		background: url('/egg-bloom-one.png') no-repeat center center;
+		background-size: contain;
+	}
+	&.egg-bloom-two {
+		background: url('/egg-bloom-two.png') no-repeat center center;
+		background-size: contain;
 	}
+
 }
 
 @keyframes bloomBurst {
@@ -138,21 +153,15 @@ html {
 		opacity: 0.8;
 	}
 }
-
-@-moz-document url-prefix() {
-	@keyframes bloomBurst {
-		from {
-			opacity: 0;
-		}
-		40% {
-			opacity: 0.5;
-		}
-		to {
-			opacity: 0.3;
-		}
-	}
-	.page-bloom {
-		display: none;
+@keyframes bloomSubtle {
+	from {
+		opacity: 0;
+	}
+	40% {
+		opacity: 0.8;
+	}
+	to {
+		opacity: 0.6;
 	}
 }