mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-04 13:23:28 +00:00
rasterize bloom :D
This commit is contained in:
parent
0e2c2aea01
commit
af55f8d72d
BIN
apps/landing/public/bloom-one.png
Normal file
BIN
apps/landing/public/bloom-one.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 243 KiB |
BIN
apps/landing/public/bloom-three.png
Normal file
BIN
apps/landing/public/bloom-three.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 272 KiB |
BIN
apps/landing/public/bloom-two.png
Normal file
BIN
apps/landing/public/bloom-two.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 273 KiB |
BIN
apps/landing/public/egg-bloom-one.png
Normal file
BIN
apps/landing/public/egg-bloom-one.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 453 KiB |
BIN
apps/landing/public/egg-bloom-two.png
Normal file
BIN
apps/landing/public/egg-bloom-two.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 452 KiB |
|
@ -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(
|
||||
|
|
|
@ -18,10 +18,10 @@ export const Bubbles = () => {
|
|||
interactivity: {
|
||||
events: {
|
||||
onClick: {
|
||||
enable: true,
|
||||
enable: false,
|
||||
mode: 'push'
|
||||
},
|
||||
resize: true
|
||||
resize: false
|
||||
}
|
||||
},
|
||||
particles: {
|
||||
|
@ -29,7 +29,7 @@ export const Bubbles = () => {
|
|||
value: '#ffffff'
|
||||
},
|
||||
collisions: {
|
||||
enable: true
|
||||
enable: false
|
||||
},
|
||||
move: {
|
||||
direction: 'top',
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>.
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
@keyframes bloomSubtle {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
.page-bloom {
|
||||
display: none;
|
||||
40% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
to {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue