bring back the animated splash screen

bomberfish · bomberfish · commit 99cd3137b5f5 · 2025-05-29T18:10:23.000-04:00
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" BGCOLOR="black">
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="icon" href="/app.webp" />
diff --git a/frontend/src/splash.tsx b/frontend/src/splash.tsx
@@ -805,6 +805,8 @@ export const Splash: Component<
 		width: 100%;
 		height: 100%;
 
+		--animation: cubic-bezier(0.25, 0, 0.25, 1);
+
 		.splash, .blur, .main {
 			position: absolute;
 			width: 100%;
@@ -819,9 +821,15 @@ export const Splash: Component<
 		}
 
 		.blur {
-			backdrop-filter: blur(0.5vw);
-			background-color: color-mix(in srgb, var(--bg) 40%, transparent);
+			backdrop-filter: blur(1rem);
+			background-color: color-mix(in srgb, var(--bg) 35%, transparent);
 			z-index: 102;
+			transition: backdrop-filter .65s var(--animation) 0.35s, background-color .65s var(--animation) 0.35s;
+
+			@starting-style {
+	      backdrop-filter: blur(2.5rem);
+  			background-color: color-mix(in srgb, var(--bg) 80%, transparent);
+			}
 		}
 
 		.main {
@@ -834,6 +842,7 @@ export const Splash: Component<
 		.container {
 			backdrop-filter: blur(0.5vw);
 			background-color: color-mix(in srgb, var(--bg) 80%, transparent);
+      box-shadow: 0px 0px 20px color-mix(in srgb, var(--surface0) 40%, transparent);
 			width: min(40rem, 100%);
 			margin: 0 1rem;
 			padding: 1.3em;
@@ -844,6 +853,17 @@ export const Splash: Component<
 			display: flex;
 			flex-direction: column;
 			gap: 0.5rem;
+
+			opacity: 1;
+			transform: translateY(0vh) rotate3d(1, 0, 0, 0);
+			transition: opacity .65s var(--animation) 0.35s, transform .65s var(--animation) 0.35s;
+			transform-origin: 50% 0%;
+			perspective: 1250px;
+
+			@starting-style {
+			  opacity: 0;
+				transform: translateY(5vh) rotate3d(1, 0, 0, 15deg);
+			}
 		}
 
 		.logo {
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
@@ -191,7 +191,7 @@ body.error {
 		url("/fonts/display/Renogare.woff2") format("woff2");
 	font-weight: normal bold;
 	font-style: normal italic;
-	font-display: block;
+	font-display: swap;
 }
 
 @font-face {
@@ -203,7 +203,7 @@ body.error {
 		url("/fonts/body/AdwaitaSans-Regular.ttf") format("truetype");
 	font-weight: 100 900;
 	font-style: normal;
-	font-display: block;
+	font-display: swap;
 }
 
 @font-face {
@@ -215,7 +215,7 @@ body.error {
 		url("/fonts/body/AdwaitaSans-Italic.ttf") format("truetype");
 	font-weight: 100 900;
 	font-style: italic;
-	font-display: block;
+	font-display: swap;
 }
 
 @font-face {
@@ -227,7 +227,7 @@ body.error {
 		url("/fonts/mono/AdwaitaMono-Regular.ttf") format("truetype");
 	font-weight: normal;
 	font-style: normal;
-	font-display: block;
+	font-display: swap;
 }
 
 @font-face {
@@ -239,7 +239,7 @@ body.error {
 		url("/fonts/mono/AdwaitaMono-Italic.ttf") format("truetype");
 	font-weight: normal;
 	font-style: italic;
-	font-display: block;
+	font-display: swap;
 }
 
 @font-face {
@@ -251,7 +251,7 @@ body.error {
 		url("/fonts/mono/AdwaitaMono-Bold.ttf") format("truetype");
 	font-weight: bold;
 	font-style: normal;
-	font-display: block;
+	font-display: swap;
 }
 
 @font-face {
@@ -263,7 +263,7 @@ body.error {
 		url("/fonts/mono/AdwaitaMono-BoldItalic.ttf") format("truetype");
 	font-weight: bold;
 	font-style: italic;
-	font-display: block;
+	font-display: swap;
 }
 
 h1,
